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

i'm new @ query , simple : ) right it's setup show popup div when click on details button, works fine. i'm trying figure out how can hide popup div if user clicks again on same details button. appreciated!

    <script type="text/javascript">     $(document).ready(function() {         $(".details").click(function() {             $(this).parents('h1').next('.popup').fadein(1000);                       });      });        </script>                   <h1>we 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> 

use fadetoggle() instead of 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 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()