team

list

.article .mc_team_list {
  padding: 0 0 20px;
  font-size: 0;
  line-height: 1;
  text-align: center;
}
.article .mc_team_list li {
  box-sizing: border-box;
  display: inline-block;
  padding: 0 10px 20px;
  width: 100%;
  max-width: 220px;
  list-style: none;
  vertical-align: top;
}
.article .mc_team_list li img {
  margin: auto;
  width: 100%;
  max-width: 220px;
  height: auto;
}
.article .mc_team_list a,
.article .mc_team_list img {
  position: relative;
  display: block;
}
.article .mc_team_list a:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: transparent;
  transition: all 250ms ease;
}
.article .mc_team_list a:hover:after {
  background: rgba(255,255,255,0.2);
}
.article .mc_team_list li strong {
  display: block;
  padding: 20px 0 0;
  font-size: 20px;
  font-weight: bold;
}

<ul class="mc_team_list">
  <li>
    <a href="#"><img src="" alt=""><strong>View Bio</strong></a>
  </li>
  <li>
   <a href="#"><img src="" alt=""><strong>View Bio</strong></a>
  </li>
</ul>

attorney scroll

//  < attorney page >
var height_of_footer_2 = $('.main_footer').outerHeight() + $('.agency').outerHeight();
var length = $(document).height() - ( height_of_footer_2 + $('.sidebar').offset().top + $('.sb_attorney_image').height() );

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();

  var scroll = $(this).scrollTop();
  var height = $('.sb_attorney_image').height() + 'px';

  var height_of_footer = $('.main_footer').outerHeight() + $('.agency').outerHeight();

if (scroll < height_of_footer) {

    $('.sb_attorney_image').css({
        'position': 'fixed',
        'bottom': '0'
    });

} else if (scroll > length) {

    $('.sb_attorney_image').css({
        'position': 'absolute',
        'bottom': '0'
        // 'top': 'auto'
    });

} else {

    $('.sb_attorney_image').css({
        'position': 'fixed',
        // 'top': '0',
        'height': height
    });

}
});
//  </ attorney page >

//  < resize >
$(window).resize(function(){
  rTO = setTimeout(function(){
    clearTimeout(rTO);
    var height_of_footer_2 = $('.main_footer').outerHeight() + $('.agency').outerHeight();
    var length = $(document).height() - ( height_of_footer_2 + $('.sidebar').offset().top + $('.sb_attorney_image').height() );
  }, 100);
});
//  </ resize >

attorney bios

css

.sxn_attorneys {
  overflow: hidden;
  background: #222;
  background-size: cover;
}
.sxn_attorneys .sxn_wrap {
  max-width: 1640px;
}
.sxn_attorneys .list_attorneys .item_attorney {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: #fff;
}
.sxn_attorneys .list_attorneys .item_attorney.active {
  background: orange;
}
.sxn_attorneys .list_info .item_info {
  display: none;
}
.sxn_attorneys .list_info .item_info.active {
  display: block;
}
.sxn_attorneys .list_info p {
}

script

//  < sxn_attorneys >
$('.sxn_attorneys .list_attorneys .item_attorney').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  var el_button = $( '.sxn_attorneys .list_attorneys' );
  var el_content = $( '.sxn_attorneys .list_info' );
  var current_data_index = $(this).data('core-index');

  el_button.children().removeClass('active');
  $( this ).addClass('active');
  el_content.children().removeClass( 'active' );
  el_content.find("[data-core-index='" + current_data_index + "']" ).addClass('active');
});
//  </ sxn_attorneys >

html

<div class="sxn_attorneys"><div class="sxn_wrap">
  <ul class="list_attorneys">
    <li class="active" data-core-index="1"><a href="#"><span></span></a></li>
    <li data-core-index="2"><a href="#"><span></span></a></li>
    <li data-core-index="3"><a href="#"><span></span></a></li>
    <li data-core-index="4"><a href="#"><span></span></a></li>
    <li data-core-index="5"><a href="#"><span></span></a></li>
    <li data-core-index="6"><a href="#"><span></span></a></li>
  </ul>
  <ul class="list_info">
    <li class="active" data-core-index="1">
      <p>1 Lorum ipsum</p>
    </li>
    <li data-core-index="2">
      <p>2 Lorum ipsum</p>
    </li>
    <li data-core-index="3">
      <p>3 Lorum ipsum</p>
    </li>
    <li data-core-index="4">
      <p>4 Lorum ipsum</p>
    </li>
    <li data-core-index="5">
      <p>5 Lorum ipsum</p>
    </li>
    <li data-core-index="6">
      <p>6 Lorum ipsum</p>
    </li>
  </ul>
</div></div>

// updated array version
function sxn_core_data_attorneys() {
  return array(
    //  [ id, image, name, title, bio, url ]
    [
      "id" => 1,
      "image" => "attorneys-headshot-1.jpg",
      "name" => "name",
      "title" => "title",
      "bio" => "bio",
      "url" => "#"
    ],
    [
      "id" => 2,
      "image" => "attorneys-headshot-2.jpg",
      "name" => "name",
      "title" => "title",
      "bio" => "bio",
      "url" => "#"
    ],
    [
      "id" => 3,
      "image" => "attorneys-headshot-3.jpg",
      "name" => "name",
      "title" => "title",
      "bio" => "bio",
      "url" => "#"
    ],
    [
      "id" => 4,
      "image" => "attorneys-headshot-4.jpg",
      "name" => "name",
      "title" => "title",
      "bio" => "bio",
      "url" => "#"
    ]
  );
}
function sxn_core_attorneys() {
  $core_attorneys = sxn_core_data_attorneys();
  ?> <div class="list_attorneys"> <?php
  foreach ( $core_attorneys as $value ) { ?>
    <div class="item_attorney <?php if ( $value['id'] == 1 ) { ?> active <?php } ?>" data-core-index='<?php echo $value['id'] ?>'>
      <div class='cont_image'>
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/attorneys/<?php echo $value['image']; ?>" alt="<?php echo $value['name']; ?>">
      </div>
    </div>
  <?php
  }
  ?> </div>

  <div class='list_info'>
  <?php
  foreach ( $core_attorneys as $value ) { ?>
    <div class='item_info <?php if ( $value['id'] == 1 ) { ?> active <?php } ?>' data-core-index='<?php echo $value['id'] ?>'>
      <div class="block_info">
        <div class="element_bucket element_heading">
          <div class="cont_name">
            <?php echo $value['name']; ?>
          </div>
          <div class="cont_title">
            <?php echo $value['title']; ?>
          </div>
        </div>
        <div class="element_bucket element_bio">
          <p>
            <?php echo nc_fn_trim_chars( $value['bio'], 430 ); ?> <a href="<?php echo $value['url']; ?>">Learn More</a>
          </p>
        </div>
      </div>
    </div>
  <?php
  } ?>
  </div>
<?php
}