Need to show and hide a div by clicking the same button in jquery
<p>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!</p>

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


                &lt;h1&gt;We look good together&lt;span class="details"&gt;Details&lt;/span&gt;&lt;/h1&gt;

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