Simple Expand/collapse divs
<p>how can i make it to work, when clicked expand it and when clicked again collapse it...
if it is already expand then say hide and if it is already collapse then say show.</p>

<p>below is the code so far.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;Collapsible Message Panels&lt;/title&gt;
        &lt;style type="text/css"&gt;
        *
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        #content
        {
            width: 200px;
            height: 100px;
            margin: 20px auto;
            padding: 20px;
            border: 1px dotted #999999;
            overflow: hidden;
            text-align: justify;
        }

    &lt;/style&gt;

    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {

            // Hide the "view" div.
            $('one').hide();
            $('second').hide();
            // Watch for clicks on the "slide" link.
            $('div.slide').click(function () {
                // When clicked, toggle the "view" div.
                $('second').hide();
                $('one').slideToggle(400);
                return false;
            });
            $('div.slide1').click(function () {
                // When clicked, toggle the "view" div.
                $('one').hide();
                $('second').slideToggle(400);
                return false;
            });


        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div class="slide"&gt;
        &lt;a href="#" class="slide"&gt;Disclaimer-1&lt;/a&gt;&lt;/div&gt;
    &lt;div class="slide1" &gt;
        &amp;nbsp; &amp;nbsp; | &amp;nbsp; &amp;nbsp; &lt;a href="#" class="slide1"&gt;Behavior&lt;/a&gt;&lt;/div&gt;
    &lt;div id="one" class="content"&gt;
       As you can see the structure, the elements of the menu are inside the div with class “menu_list”. 

    &lt;/div&gt;
    &lt;div id="second" class="content1"&gt;
       I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight  
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
