Cannot get slideToggle to work properly with click

Question

https://jsfiddle.net/xdehhkdk/4/

I've been researching this problem for a while and finally came to stack for some help.

My goal is to be able to have a user click on someone's name and then slide down their corresponding bio which does work.

The issue is that when you click it again, the bio should slide back up. Instead it just slides down again. Now I realize that it's probably because I have

$('.expanded-bio').hide();

in the click function, but removing that line doesn't help fix my problem. I still need to hide the other bio's somehow in the same click function.

Any help is much appreciated!

Answer 1

You need to exclude the clicked .expanded-bio from hiding initially.

$('.expanded-bio').hide();

$('.management-member').click(function() {
  // remove active class from other elements
  $('.management-member.active').not(this).removeClass('active');
  // toggle active class of clicked element
  $(this).toggleClass('active');
  // craete the corresponding `.expanded-bio`  object of clicked
  var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
  // hide other `.expanded-bio`
  $('.expanded-bio').not(thisBio).hide();
  // toggle the corresponding
  thisBio.slideToggle('fast');
});

$('.expanded-bio').hide();

$('.management-member').click(function() {
  $('.management-member.active').not(this).removeClass('active');
  $(this).toggleClass('active');
  var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
  $('.expanded-bio').not(thisBio).hide();
  thisBio.slideToggle('fast');
});

.management-member {
  background: white;
  border: 2px black dashed;
  padding: 20px;
  margin: 0 20px 20px;
  width: 100px;
  float: left;
}
.management-member:hover {
  cursor: pointer;
}
.expanded-bio {
  background: lightgreen;
  clear: both;
  margin-bottom: 10px;
  padding: 20px;
}
.BAD .expanded-bio {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="management-member active" id="hdean">
  <span class="active-overlay"></span>
  <div class="management-info">
    <h3 class="management-title">Holly D. Deem, CFA</h3>
  </div>
</div>

<div class="management-member active" id="jsmith">
  <span class="active-overlay"></span>
  <div class="management-info">
    <h3 class="management-title">John Smith</h3>
  </div>
</div>

<div class="row">
  <div class="large-12 columns expanded-bio bio-row" data-bio="hdean" style="display: block;">
    <h3 class="management-title">Holly D. Deem, CFA</h3>
  </div>
</div>

<div class="row BAD">
  <div class="large-12 columns expanded-bio bio-row" data-bio="jsmith" style="display: block;">
    <h3 class="management-title">John Smith</h3>
  </div>
</div>