Roll up/down in javascript
<p>please help me with this roll up/down side bar menu. </p>

<p>I have made a video clip to demonstrate. </p>

<p><a href="http://www.youtube.com/watch?v=Eegqh1w3eJQ" rel="nofollow">http://www.youtube.com/watch?v=Eegqh1w3eJQ</a></p>

<p>Here is html code:</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;Mode 1&lt;/title&gt;
&lt;link href="Style_sheet.css" rel="stylesheet" type="text/css" /&gt;
&lt;script src="Display text.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="Body"&gt;
&lt;div class="header"&gt;
&lt;h1 id="head"&gt;Manage Components&lt;/h1&gt;
&lt;h3 id="select-system"&gt;Select System&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="side-nav"&gt;

&lt;a href="#" onclick="show('n1')" id="english"&gt;57.102 Introductory Spanish&lt;/a&gt;&lt;br /&gt;
&lt;div id="n1" style="display:none"&gt;
&lt;a href="#" onclick="show('n2')" id="green"&gt;Section 1:Introduction to Spanish Culture&lt;/a&gt;&lt;br /&gt;
&lt;div id="n2" style="display:none"&gt;
&lt;a href="#" id="dark_red"&gt;Topic 1:Getting started&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="dark_red"&gt;Topic 2:Introduction to Grammar&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;

&lt;/div&gt;

&lt;a href="#" onclick="show('n3')" id="green"&gt;Section 2:Getting started with reading and  writing&lt;/a&gt;&lt;br /&gt;
&lt;div id="n3" style="display:none"&gt;
&lt;a href="#" onclick="show('nn3')" id="dark_red"&gt;Topic 1:Reading Spanish&lt;/a&gt;&lt;br /&gt;
&lt;div id="nn3" style="display:none"&gt;
&lt;a href="mode 1.html" onclick="show('nn4')" id="light_blue"&gt;Mode 1:Spanish Components&lt;/a&gt;
&lt;div id="nn4" style="display:none"&gt;
&lt;a href="reading_spanish.html" id="red"&gt;Spanish Reading&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;br /&gt;
&lt;a href="#" id="dark_red"&gt;Topic 2:Writing in Spanish&lt;/a&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;br /&gt;

&lt;a href="#" onclick="show('m1')" id="english"&gt;Topic SuperMode&lt;/a&gt;&lt;br /&gt;
&lt;div id="m1" style="display:none"&gt;
&lt;a href="#" id="green"&gt;Study Guide&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="show('m2')" id="green"&gt;Key Words&lt;/a&gt;&lt;br /&gt;
&lt;div id="m2" style="display:none"&gt;
&lt;a href="#" id="dark_red"&gt;Pragmatics&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="dark_red"&gt;Manana&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="dark_red"&gt;Tiempo&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="dark_red"&gt;Cara&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="dark_red"&gt;Triste&lt;/a&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;a href="#" id="green"&gt;Learning Support&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Help&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Chat&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Email&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Notes&lt;/a&gt;&lt;br /&gt;
&lt;/div&gt;&lt;br /&gt;

&lt;a href="#" onclick="show('p1')" id="english"&gt;Pre-defined modes&lt;/a&gt;&lt;br /&gt;
&lt;div id="p1" style="display:none"&gt;
&lt;a href="#" id="green"&gt;Culture aspects&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Reading practice&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Writing practice&lt;/a&gt;&lt;br /&gt;
&lt;a href="#" id="green"&gt;Listening and speaking&lt;/a&gt;&lt;br /&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;div id="slection"&gt;
57.102 Introductory Spanish &gt; Section 1 &gt; Topic 1 &gt; Mode 1
&lt;/div&gt;

&lt;div id="content"&gt;
&lt;p id="list-component"&gt;List of Available Components &lt;/p&gt;
&lt;!--&lt;div id="check-box"&gt;
&lt;input type="checkbox" value="checkbox1" /&gt;
&lt;label id="label"&gt;Reading&lt;/label&gt;
&lt;label id="label2"&gt;15-10-2010&lt;/label&gt;
&lt;label id="label"&gt;10:52&lt;/label&gt;
&lt;label id="label2"&gt;Kemp&lt;/label&gt;&lt;br /&gt;

&lt;input type="checkbox" value="checkbox2" /&gt;
&lt;label id="label"&gt;Listening&lt;/label&gt;
&lt;label id="label2"&gt;14-10-2010&lt;/label&gt;
&lt;label id="label"&gt;8:02&lt;/label&gt;
&lt;label id="label2"&gt;Kemp&lt;/label&gt;&lt;br /&gt;

&lt;input type="checkbox" value="checkbox3" /&gt;
&lt;label id="label"&gt;Writing&lt;/label&gt;
&lt;label id="label2"&gt;10-10-2010&lt;/label&gt;
&lt;label id="label"&gt;7:35&lt;/label&gt;
&lt;label id="label2"&gt;Kemp&lt;/label&gt;&lt;br /&gt;

&lt;input type="checkbox" value="checkbox4" /&gt;
&lt;label id="label"&gt;Grammar&lt;/label&gt;
&lt;label id="label2"&gt;01-10-2010&lt;/label&gt;
&lt;label id="label"&gt;4:20&lt;/label&gt;
&lt;label id="label2"&gt;Kemp&lt;/label&gt;&lt;br /&gt;
&lt;/div&gt;--&gt;


&lt;table id="tabl"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" value="checkbox1" /&gt;&lt;/td&gt;
&lt;td&gt;Reading&lt;/td&gt;
&lt;td&gt;15-10-2010&lt;/td&gt;
&lt;td&gt;10:52&lt;/td&gt;
&lt;td&gt;Kemp&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" value="checkbox2" /&gt;&lt;/td&gt;
&lt;td&gt;Listening&lt;/td&gt;
&lt;td&gt;14-10-2010&lt;/td&gt;
&lt;td&gt;08:02&lt;/td&gt;
&lt;td&gt;Kemp&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" value="checkbox3" /&gt;&lt;/td&gt;
&lt;td&gt;Writing&lt;/td&gt;
&lt;td&gt;10-10-2010&lt;/td&gt;
&lt;td&gt;07:35&lt;/td&gt;
&lt;td&gt;Kemp&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;input type="checkbox" value="checkbox4" /&gt;&lt;/td&gt;
&lt;td&gt;Grammar&lt;/td&gt;
&lt;td&gt;01-10-2010&lt;/td&gt;
&lt;td&gt;04:20&lt;/td&gt;
&lt;td&gt;Kemp&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;br /&gt;

&lt;input type="button" name="edit_button" id="save_but" value="Edit" /&gt;
&lt;input type="button" name="delete_button" id="cancel_but" value="Delete" /&gt;
&lt;input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" /&gt;
&lt;input type="button" name="back" id="preview-but" value="Back" /&gt;


&lt;/div&gt;


&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is javascript</p>

<pre><code>function show(id)
{
    object=document.getElementById(id);
    if(object.style.display=="none")
    {
        object.style.display="";
        }
        else
        {
        object.style.display="none";
        }
    }
</code></pre>

<p>Here is CSS</p>

<pre><code>@charset "utf-8";
/* CSS Document */
html,body{
    padding:0;
    margin:0;
    background-color:#E8E8E8;
}
.Body{
    background-color:#FFF;
    width:1050px;
    height:900px;
    margin:auto;
    padding:0;
    position:relative;
}
.header{
    background-color:#FFF;
    width:1048px;
    height:140px;
    float:right;
    border:1px #F00 dotted;
    position:relative;
}
.header #head{
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:46px;
}
.header #select-system{
    position:absolute;
    left:20px;
    bottom:-18px;
    font-family:Verdana, Geneva, sans-serif;
    text-decoration:underline;
}
.side-nav{
    background-color:#FFF;
    width:250px;
    height:757px;
    position:absolute;
    left:auto;
    bottom:0px;
    border:1px dotted #F00;
}
.side-nav #english{
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    padding:5px;
    color:#06F;
}
.side-nav #blue{
    color:#03F;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
}
.side-nav #green{
    color:#6F0;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:15px;
}
.side-nav #dark_red{
    color:#900;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:30px;
}
.side-nav #light_blue{
    color:#0CF;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:45px;
}
.side-nav #red{
    color:#F00;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:60px;
}
.Body #content{
    position:absolute;
    left:260px;
    top:180px;
    width:780px;
    height:700px;
    border:1px solid #F00;
}
.Body #content1{
    position:absolute;
    left:260px;
    top:150px;
    width:780px;
    height:740px;
    border:1px solid #F00;
}
.Body #txt{
    margin-left:20px;
}
.Body #slection{
    position:absolute;
    left:260px;
    top:150px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#F00;
    font-weight:bold;
}
.Body #boxes{
    border:2px solid #000;
    margin-left:10px;
    margin-top:10px;
    height:25px;
}
.Body #text{
    font-weight:bold;
    font-size:20px;
    margin-left:20px;
    margin-top:10px;
}
.Body #cont_box{
    width:730px;
    height:180px;
    border:2px solid #000;
    margin-left:20px;
    font-size:20px;
    color:#00F;
    padding:5px;
}
.Body #cont_box1{
    width:730px;
    height:280px;
    border:2px solid #F60;
    margin-left:13px;
    font-size:20px;
    color:#06F;
    padding:10px;
}
.Body #cont_box2{
    width:645px;
    height:350px;
    border:2px solid #F60;
    margin-left:60px;
    font-size:20px;
    color:#06F;
}
.Body #browse_box{
    border:2px solid #000;
    margin-left:150px;
    margin-bottom:10px;
    height:25px;
    width:400px;
}
.Body #button{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:10px;
}
.Body #button:hover{
    background-color:#09F;
}
.Body #button_more{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:567px;
}
.Body #save_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:150px;
}
.Body #cancel_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:20px;
}
.Body #preview-but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:100px;
}
.Body #preview-but:hover{
    color:#009;
}
.Body #checkbox{
    margin-left:150px;
    height:20px;
}
.Body #dropdownbox{
    width:180px;
    height:30px;
    position:absolute;
    left:280px;
    top:10px;
}
.Body #b1{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    color:#F00;
}
.Body #icons{
    width:130px;
    height:140px;
    margin-right:10px;
    margin-left:60px;
    margin-top:50px;
    float:left;
}
.Body #text_icons{
    width:190px;
    height:15px;
    float:left;
    font-size:14px;
    text-decoration:none;
    color:#06F;
    margin-left:20px;
    margin-right:5px;
}
.Body #extra-materials{
    font-size:18px;
    text-decoration:none;
    margin-left:60px;
    color:#06F;
}
.Body #extra-materials:hover{
    text-decoration:underline;
}
.Body #list-component{
    margin-left:40px;
    font-size:18px;
    font-weight:bold;
}
.Body #check-box{
    margin-left:150px;
}
.Body #label{
    margin-left:30px;
}
.Body #label2{
    margin-left:80px;
}
.Body #tabl{
    border:hidden;
    width:500px;
    height:10px;
    margin-left:150px;
    margin-top:50px;
}
</code></pre>

<p>Please help!!!</p>

<p>Thanks in advance!</p>
