jqueryの同じボタンをクリックしてdivを表示/非表示にする必要があります

Question

私は新しいクエリです。これはおそらく本当に簡単です：）今すぐ詳細ボタンをクリックするとポップアップdivを表示するように設定されています良い。今、ユーザーがその同じ詳細ボタンを再びクリックすると、そのポップアップ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

だけではなく、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()