Post
Ask Question

Accordion Control in JavaScript

Step 1: In this example, we use JavaScript to make the accordion control.
 
Accorden1.gif
  Image 1
 
Accorden2.gif
Image 2
 
Here we use <div> and <table> tags and images to show the submenu
 
Step 2: Set the display property( None). It hides the Submenu. (tdfirst)
 
Accorden3.gif
 
Call the JavaScript function Show() and Hide() to display and hide the submenu on the onclick event of the images.
 
Accorden4.gif
 
Code
  1. <div>  
  2.     <table>  
  3.     <tr style="border-style: solid; border-width: thin; border-color: inherit;">  
  4.     <div id="div1" >  
  5.     <td class="style1"  
  6.             style="border: thin solid #000000; text-align: right;">  
  7.         <table><tr><td>Menu1</td><td class="style3">  
  8.             <img alt="" onclick="Show()" src="Image/down%20arrow.jpg"  
  9.                 style="height: 15px; margin-left: 0px"  /><img  
  10.                 alt="" onclick="Hide()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>  
  11.         </div>  
  12.     </tr>  
  13.     <tr>  
  14.     <div id="div2">  
  15.     <td id="tdfirst" class="style2"   
  16.             style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu1</td>  
  17.     </div>  
  18.     </tr>  
  19.     </table>  
  20.     <div>  
  21.     <table>  
  22.     <tr style="border-style: solid; border-width: thin; border-color: inherit;">  
  23.     <div id="div3" >  
  24.     <td class="style1"  
  25.             style="border: thin solid #000000; text-align: right;">  
  26.         <table><tr><td>Menu2</td><td class="style3">  
  27.             <img  alt="" onclick="Show2()" src="Image/down%20arrow.jpg"  
  28.                 style="height: 15px; margin-left: 0px"  /><img  
  29.                 alt="" onclick="Hide2()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>  
  30.         </div>  
  31.     </tr>  
  32.     <tr>  
  33.     <div id="div4">  
  34.     <td id="tdsecond" class="style2"   
  35.             style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu2</td>  
  36.     </div>  
  37.     </tr>  
  38.     </table>  
  39.     <table>  
  40.     <tr style="border-style: solid; border-width: thin; border-color: inherit;">  
  41.     <div id="div5" >  
  42.     <td class="style1"  
  43.             style="border: thin solid #000000; text-align: right;">  
  44.         <table><tr><td>Menu3</td><td class="style3">  
  45.             <img id="imgdown" alt="" onclick="Show3()" src="Image/down%20arrow.jpg"  
  46.                 style="height: 15px; margin-left: 0px"  /><img id="imgup"  
  47.                 alt="" onclick="Hide3()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>  
  48.         </div>  
  49.     </tr>  
  50.     <tr>  
  51.     <div id="div6">  
  52.     <td id="tdthird" class="style2"   
  53.             style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu3</td>  
  54.     </div>  
  55.     </tr>  
  56.     </table>  
  57.     </div> 
Call the javascript Show function that helps to show and hide the submenu:
 
Code
  1. <script language="JavaScript" type="text/javascript" >  
  2.             function Show() {  
  3.                 document.getElementById("tdfirst").style.display = 'block';  
  4.   
  5.             }  
  6.             function Hide() {  
  7.   
  8.                 document.getElementById("tdfirst").style.display = 'none';  
  9.             }  
  10.             function Show2() {  
  11.                 document.getElementById("tdsecond").style.display = 'block';  
  12.   
  13.             }  
  14.             function Hide2() {  
  15.    
  16.                 document.getElementById("tdsecond").style.display = 'none';  
  17.             }  
  18.             function Show3() {  
  19.                 document.getElementById("tdthird").style.display = 'block';  
  20.             }  
  21.             function Hide3() {  
  22.   
  23.                 document.getElementById("tdthird").style.display = 'none';  
  24.             }  
  25.   
  26.  </script> 
     

Complete Code

 

  1. <head runat="server">  
  2.     <title></title>  
  3.         <script language="JavaScript" type="text/javascript" >  
  4.             function Show() {  
  5.                 document.getElementById("tdfirst").style.display = 'block';  
  6.   
  7.             }  
  8.             function Hide() {  
  9.   
  10.                 document.getElementById("tdfirst").style.display = 'none';  
  11.             }  
  12.             function Show2() {  
  13.                 document.getElementById("tdsecond").style.display = 'block';  
  14.   
  15.             }  
  16.             function Hide2() {  
  17.   
  18.                 document.getElementById("tdsecond").style.display = 'none';  
  19.             }  
  20.             function Show3() {  
  21.                 document.getElementById("tdthird").style.display = 'block';  
  22.   
  23.             }  
  24.             function Hide3() {  
  25.   
  26.                 document.getElementById("tdthird").style.display = 'none';  
  27.             }  
  28.   
  29.  </script>  
  30.   
  31.     <style type="text/css">  
  32.         .style1 {  
  33.             width: 164px;  
  34.         }  
  35.         .style2  
  36.         {  
  37.             height: 98px;  
  38.              
  39.         }  
  40.         .style3  
  41.         {  
  42.             width: 110px;  
  43.         }  
  44.     </style>  
  45.   
  46. </head>  
  47. <body>  
  48.     <form id="form1" runat="server">  
  49.     <div>  
  50.     <table>  
  51.     <tr style="border-style: solid; border-width: thin; border-color: inherit;">  
  52.     <div id="div1" >  
  53.     <td class="style1"  
  54.             style="border: thin solid #000000; text-align: right;">  
  55.         <table><tr><td>Menu1</td><td class="style3">  
  56.             <img alt="" onclick="Show()" src="Image/down%20arrow.jpg"  
  57.                 style="height: 15px; margin-left: 0px"  /><img  
  58.                 alt="" onclick="Hide()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>  
  59.         </div>  
  60.     </tr>  
  61.     <tr>  
  62.     <div id="div2">  
  63.     <td id="tdfirst" class="style2"   
  64.             style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu1</td>  
  65.     </div>  
  66.     </tr>  
  67.     </table>  
  68.     <div>  
  69.     <table>  
  70.     <tr style="border-style: solid; border-width: thin; border-color: inherit;">  
  71.     <div id="div3" >  
  72.     <td class="style1"  
  73.             style="border: thin solid #000000; text-align: right;">  
  74.         <table><tr><td>Menu2</td><td class="style3">  
  75.             <img  alt="" onclick="Show2()" src="Image/down%20arrow.jpg"  
  76.                 style="height: 15px; margin-left: 0px"  /><img  
  77.                 alt="" onclick="Hide2()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>  
  78.         </div>  
  79.     </tr>  
  80.     <tr>  
  81.     <div id="div4">  
  82.     <td id="tdsecond" class="style2"   
  83.             style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu2</td>  
  84.     </div>  
  85.     </tr>  
  86.     </table>  
  87.     <table>  
  88.     <tr style="border-style: solid; border-width: thin; border-color: inherit;">  
  89.     <div id="div5" >  
  90.     <td class="style1"  
  91.             style="border: thin solid #000000; text-align: right;">  
  92.         <table><tr><td>Menu3</td><td class="style3">  
  93.             <img id="imgdown" alt="" onclick="Show3()" src="Image/down%20arrow.jpg"  
  94.                 style="height: 15px; margin-left: 0px"  /><img id="imgup"  
  95.                 alt="" onclick="Hide3()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>  
  96.         </div>  
  97.     </tr>  
  98.     <tr>  
  99.     <div id="div6">  
  100.     <td id="tdthird" class="style2"   
  101.             style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu3</td>  
  102.     </div>  
  103.     </tr>  
  104.     </table>  
  105.     </div>  
  106.     </form>  
  107. </body> 


Similar Articles