Click toggle with multiple targets

Question

I have a two images and when you click on one, text (relevant to image) slides into view below the image. Currently the method for closing/toggling the text is to click on the image again.

If I click on the second image while the text on the first image is still visible, it closes the text. I then have to click on the second image again to see its text content appear.

I'd like to be able to click on the second image and either the text content just swaps OR it closes the text for the first image and opens the text for the second image (in just one click, not two).

Any input appreciated!

I have a fiddle here

JS:

    var teamMember = document.getElementsByClassName("team-member");
    var teamRow = document.getElementsByClassName("team-row");
    var bioContainer = $( "<div class='container' id='bio-container'></div>" );

    $(bioContainer).hide();


    $(teamMember).click(function() {

        $(this).toggleClass('member-selected');     

        $('.team-grid').toggleClass('member-active');

        $(bioContainer).html("");

        var thisBio = $(this).find(".team-bio");

        var thisRow = $(this).parent(teamRow);

        $(thisRow).after(bioContainer); 

        var bioHTML = $(thisBio).html();

        $height = $(thisBio).outerHeight(true)

        $(bioContainer).css('height', $height);

        $(bioContainer).slideToggle( "slow", function() {       
            $(this).html(bioHTML);
        });  
    });

HTML:

<section class="team-grid"> 

  <div class="team-row">

      <div class="col-sm-6 team-member">
          <img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
             JOHN'S Bio
            </div>
          </div>
      </div>

      <div class="col-sm-6 team-member">
          <img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
               SALLY'S Bio
            </div>
          </div>
      </div>

  </div>

</section>

CSS:

.col-sm-6 {
  width:50%;
  float:left;
}
img {
  width:100%;
  height:200px;
  object-fit:cover;
  cursor:pointer;
}
.close-bio {
  color:pink;
  font-weight:bold;
}
.team-bio {
    visibility: hidden;
    padding: 80px 20%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#bio-container {
    background: #666;
    width: 100%;
    max-width: none;
    position: relative;
    float: left;
    padding: 25px;
    color:#fff;
    font-size:20px;
}

Answer 1

Please check this answer,

Js Fiddle

	var teamMember = document.getElementsByClassName("team-member");
	var teamRow = document.getElementsByClassName("team-row");
	var bioContainer = $( "<div class='container' id='bio-container'></div>" );
  var bioContainerExpanded = false;

	$(bioContainer).hide();
  
			
	$(teamMember).click(function() {
  	if(bioContainerExpanded){
        $(bioContainer).slideToggle( "slow", function() {});
    		bioContainerExpanded = false;
    }

		$('.team-grid').toggleClass('member-active');

		// Resets bioContainer html to blank
		$(bioContainer).html("");

		$(this).toggleClass('member-selected');		
		// Assign 'this' team bio to variable
		var thisBio = $(this).find(".team-bio");

		// Assign 'this' row to variable (find teamRow parent of this teamMember)
		var thisRow = $(this).parent(teamRow);
    
    // Place bio after row
    $(thisRow).after(bioContainer);	
    
		// Assign 'this' bio html to variable
		var bioHTML = $(thisBio).html();

		// Dynamically calculte height of the bio including padding
		$height = $(thisBio).outerHeight(true)

		//assign height to bioContainer before the toggle so that it slides smoothly
		$(bioContainer).css('height', $height);

		// Slide toggle the bioContainer
		$(bioContainer).slideToggle( "slow", function() {		
			// Insert bioHTML into 'this' bioContainer
			$(this).html(bioHTML);
		});
   bioContainerExpanded = true;

	});

.col-sm-6 {
  width:50%;
  float:left;
}
img {
  width:100%;
  height:200px;
  object-fit:cover;
  cursor:pointer;
}
.close-bio {
  color:pink;
  font-weight:bold;
}
.team-bio {
    visibility: hidden;
    padding: 80px 20%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#bio-container {
    background: #666;
    width: 100%;
    max-width: none;
    position: relative;
    float: left;
    padding: 25px;
    color:#fff;
    font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="team-grid"> 

  <div class="team-row">

      <div class="col-sm-6 team-member">
          <img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
             JOHN'S Bio
            </div>
          </div>
      </div>

      <div class="col-sm-6 team-member">
          <img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
               SALLY'S Bio
            </div>
          </div>
      </div>

  </div>

</section>