CODEWITHSUNDEEP
jquery
davidz
davidz

Reputation: 277

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>

Upvotes: 0

Views: 3214

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47687

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()

Upvotes: 2

Related Questions