Нужно показать и скрыть div, нажав ту же кнопку в jquery

Question

Я новичок в запросе, и это, вероятно, очень просто:) Прямо сейчас, когда вы нажимаете кнопку подробных сведений, вы можете установить всплывающее окно хорошо. Теперь я пытаюсь выяснить, как я могу скрыть этот всплывающий div, если пользователь снова нажимает эту кнопку. Любая помощь будет оценена!

<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 1

Использование fadeToggle() вместо того, чтобы просто 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()