Expand div to show different content
<p>I want each menu item to expand and show different content, I have one menu item working. But I want to be able to click on menu item 2 will close current expanded div and then expanded a new div. At the moment when I click on each menu item each content div opens on top of each other.</p>

<p>heres what I'm using to show the content for the welcome content.</p>

<pre><code>jQuery(function($) {
    var open = false;
    $('.slide_button_welcome').click(function () {
        if(open === false) {
            $('.slide_welcome').animate({ height: '100%' }
            , 400, 'easeOutCirc');
            $(this).css('backgroundPosition', 'bottom left');
            open = true;
            return false;
        } else {
            $('.slide_welcome').animate({ height: '0px' }
            , 400, 'easeOutCirc');
            $(this).css('backgroundPosition', 'top left');
            open = false;
            return false;
        }
    });     
});
</code></pre>

<p>Thanks in advance, any help would be great.</p>

<p>Heres the HTML for the section Im referring to:</p>

<pre><code>&lt;!-- BEGIN #primary_nav --&gt;
&lt;div  id="primary_nav"&gt;
    &lt;div id="primary_nav_wrap"&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a class="slide_button_welcome" href="#"&gt;Welcome&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="slide_button_gallery" href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Bridal&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;       
        &lt;/nav&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End #primary_nav --&gt;


&lt;!-- BEGIN #slide_container --&gt;
&lt;div id="content_slider"&gt;

    &lt;!-- BEGIN Welcome --&gt;
    &lt;div class="slide_welcome"&gt;
        &lt;div class="slide_inner"&gt;
            &lt;h1&gt;Gill Clement&lt;/h1&gt;
            &lt;p&gt;Gill designs and creates her jewellery from her studio outlet in the village of Mumbles, set at the Western end of Swansea Bay. A Jewellery Graduate from London’s Sir John Cass School of art in 1982, Gill came away with a reputation for innovation and experiment, constantly exploring the cutting edge and pushing boundaries of the profession that has become her life.
            &lt;/p&gt;
            &lt;p&gt;Gill’s work has been recognised and heraled throughout her career, with extensive sales worldwide, from London to New york to Japan.
            Examples of Gill’s work can be found in permanent collections
            at the Museum of Wales, Birmingham City Art Gallery and the
            Contemporary Arts Society.&lt;/p&gt;              
        &lt;/div&gt;  
    &lt;/div&gt;
    &lt;!-- End Welcome --&gt;

    &lt;!-- BEGIN Gallery --&gt;
    &lt;div class="slide_gallery"&gt;
        &lt;div class="slide_inner"&gt;
            &lt;h1&gt;Gallery&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet consectetuer adipi scing elit, sed diam non numy nibh euismod tempor incidunt ut labore et dolore mahna ali quam erat volupat ostrud exerci tatiuon ullamcorper suscipit laboris nisl ut aliquip ex ea com modo consequat. Duis autem novel seum irure dolor in henderit.&lt;/p&gt; 

            &lt;!-- BEGIN jCarousel --&gt;
            &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;
                        &lt;span class="post-thumb-overlay"&gt;&lt;/span&gt;
                        &lt;img src="img/gallery/gallery_thumb_01.jpg" alt="" width="224px" height="360px"  /&gt;';
                    &lt;/a&gt;
                &lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;                   
            &lt;/ul&gt;
            &lt;!-- End jCarousel --&gt;

        &lt;/div&gt;  
    &lt;/div&gt;
    &lt;!-- End Gallery --&gt;


&lt;/div&gt;      
&lt;!-- End #slide_container --&gt;
</code></pre>
