title: Roll up/down in javascript
body: <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>