CODEWITHSUNDEEP
javascriptjqueryhtml
Brendon Baughn
Brendon Baughn

Reputation: 150

How to close something when you click on something else?

I am trying to make a fun website for my friends and family, and one aspect of it is to click on a button, and their bio shows up. What I want is where you click on a different bio, and the previous one disappears. How can I do this?
jQuery:

$(document).ready(function(){
  $('.page-body2').hide();
  $('.page-body3').hide();
  $('.family-photo1').on('click', function(){
    $('.page-body2').toggle();
  });
  $('.family-photo2').on('click', function(){
    $('.page-body3').toggle();
  });
  ***CODE HERE?***
});

HTML:

<div class="page-body2">
      <div class="bren"><b>Brendon:</b></div>
      <p>**BIO**</p>
    </div><div class="page-body3">
      <div class="heath"><b>Heather:</b></div>
      <p>**BIO**</p>
    </div>

Upvotes: 0

Views: 118

Answers (2)

Cagatay Gurturk
Cagatay Gurturk

Reputation: 7246

For a better UX

$('.hideBio').hide();
$('button').click(function(){   
    var l=$(this);
    $('.hideBio').fadeOut(100,function(){
            l.prev('p').fadeIn(100);
    }); 
});

https://jsfiddle.net/6tr0ey9r/1/

Upvotes: 0

renakre
renakre

Reputation: 8291

I prepared a demo for you: https://jsfiddle.net/erkaner/dordnd9r/1/

$('.hideBio').hide();
$('button').click(function(){    
    $('.hideBio').fadeOut(200);//hide all bio each time
    $(this).prev('p').fadeIn(200);//show only the selected one
});

Upvotes: 1

Related Questions