davidz davidz - 21 days ago 7
jQuery Question

Need to show and hide a div by clicking the same button in jquery

I'm new at query and this is probably really simple : ) Right now it's setup to show a popup div when you click on the details button, which works fine. Now I'm trying to figure out how I can hide that popup div if the user clicks again on that same details button. Any help would be appreciated!

<script type="text/javascript">
$(document).ready(function() {
$(".details").click(function() {
$(this).parents('h1').next('.popup').fadeIn(1000);
});
});
</script>


<h1>We look good together<span class="details">Details</span></h1>

<div class="popup">
<ul>
<li>852</li><!--Square Foot goes here-->
<li>2</li><!--Bedrooms goes here-->
<li>1</li><!--Bathrooms goes here-->
<li>$134,900</li><!--Price goes here-->
</ul>
</div>

Answer

Use fadeToggle() instead of just fadeIn()

$(document).ready(function() {
  $(".details").click(function() {
    $(this).parents('h3').next('.popup').fadeToggle(1000);              
  });     
});     
.details { display: block; cursor: pointer; font-weight: 600 }
.popup { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h3>We look good together<span class="details">Details</span></h3>

<div class="popup">
  <ul>
    <li>852</li><!--Square Foot goes here-->
    <li>2</li><!--Bedrooms goes here-->
    <li>1</li><!--Bathrooms goes here-->
    <li>$134,900</li><!--Price goes here-->                 
  </ul>               
</div>

jQuery fadeToggle()