ARTICLE

Accordion Control in JavaScript

Posted by Mahak Gupta Articles | JavaScript June 18, 2011
In this article you will see how to use the Accordion Control in JavaScript.
Reader Level:
Download Files:
 


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:

<div>
    <table>
    <tr style="border-style: solid; border-width: thin; border-color: inherit;">
    <div id="div1" >
    <td class="style1"
            style="border: thin solid #000000; text-align: right;">
        <table><tr><td>Menu1</td><td class="style3">
            <img alt="" onclick="Show()" src="Image/down%20arrow.jpg"
                style="height: 15px; margin-left: 0px"  /><img
                alt="" onclick="Hide()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
        </div>
    </tr>
    <tr>
    <div id="div2">
    <td id="tdfirst" class="style2" 
            style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu1</td>
    </div>
    </tr>
    </table>
    <div>
    <table>
    <tr style="border-style: solid; border-width: thin; border-color: inherit;">
    <div id="div3" >
    <td class="style1"
            style="border: thin solid #000000; text-align: right;">
        <table><tr><td>Menu2</td><td class="style3">
            <img  alt="" onclick="Show2()" src="Image/down%20arrow.jpg"
                style="height: 15px; margin-left: 0px"  /><img
                alt="" onclick="Hide2()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
        </div>
    </tr>
    <tr>
    <div id="div4">
    <td id="tdsecond" class="style2" 
            style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu2</td>
    </div>
    </tr>
    </table>
    <table>
    <tr style="border-style: solid; border-width: thin; border-color: inherit;">
    <div id="div5" >
    <td class="style1"
            style="border: thin solid #000000; text-align: right;">
        <table><tr><td>Menu3</td><td class="style3">
            <img id="imgdown" alt="" onclick="Show3()" src="Image/down%20arrow.jpg"
                style="height: 15px; margin-left: 0px"  /><img id="imgup"
                alt="" onclick="Hide3()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
        </div>
    </tr>
    <tr>
    <div id="div6">
    <td id="tdthird" class="style2" 
            style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu3</td>
    </div>
    </tr>
    </table>
    </div
>

Call the JavaSccript Show function that helps to show and hide the submenu:

Code

<script language="JavaScript" type="text/javascript" >
            function Show() {
                document.getElementById("tdfirst").style.display = 'block';

            }
            function Hide() {

                document.getElementById("tdfirst").style.display = 'none';
            }
            function Show2() {
                document.getElementById("tdsecond").style.display = 'block';

            }
            function Hide2() {
 
                document.getElementById("tdsecond").style.display = 'none';
            }
            function Show3() {
                document.getElementById("tdthird").style.display = 'block';
            }
            function Hide3() {

                document.getElementById("tdthird").style.display = 'none';
            }

 </script>

Complete Code:

<head runat="server">
    <title></title>
        <script language="JavaScript" type="text/javascript" >
            function Show() {
                document.getElementById("tdfirst").style.display = 'block';

            }
            function Hide() {

                document.getElementById("tdfirst").style.display = 'none';
            }
            function Show2() {
                document.getElementById("tdsecond").style.display = 'block';

            }
            function Hide2() {

                document.getElementById("tdsecond").style.display = 'none';
            }
            function Show3() {
                document.getElementById("tdthird").style.display = 'block';

            }
            function Hide3() {

                document.getElementById("tdthird").style.display = 'none';
            }

 </script>

    <style type="text/css">
        .style1 {
            width: 164px;
        }
        .style2
        {
            height: 98px;
           
        }
        .style3
        {
            width: 110px;
        }
    </style
>

</head>
<
body>
    <form id="form1" runat="server">
    <div>
    <table>
    <tr style="border-style: solid; border-width: thin; border-color: inherit;">
    <div id="div1" >
    <td class="style1"
            style="border: thin solid #000000; text-align: right;">
        <table><tr><td>Menu1</td><td class="style3">
            <img alt="" onclick="Show()" src="Image/down%20arrow.jpg"
                style="height: 15px; margin-left: 0px"  /><img
                alt="" onclick="Hide()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
        </div>
    </tr>
    <tr>
    <div id="div2">
    <td id="tdfirst" class="style2" 
            style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu1</td>
    </div>
    </tr>
    </table>
    <div>
    <table>
    <tr style="border-style: solid; border-width: thin; border-color: inherit;">
    <div id="div3" >
    <td class="style1"
            style="border: thin solid #000000; text-align: right;">
        <table><tr><td>Menu2</td><td class="style3">
            <img  alt="" onclick="Show2()" src="Image/down%20arrow.jpg"
                style="height: 15px; margin-left: 0px"  /><img
                alt="" onclick="Hide2()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
        </div>
    </tr>
    <tr>
    <div id="div4">
    <td id="tdsecond" class="style2" 
            style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu2</td>
    </div>
    </tr>
    </table>
    <table>
    <tr style="border-style: solid; border-width: thin; border-color: inherit;">
    <div id="div5" >
    <td class="style1"
            style="border: thin solid #000000; text-align: right;">
        <table><tr><td>Menu3</td><td class="style3">
            <img id="imgdown" alt="" onclick="Show3()" src="Image/down%20arrow.jpg"
                style="height: 15px; margin-left: 0px"  /><img id="imgup"
                alt="" onclick="Hide3()"  src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
        </div>
    </tr>
    <tr>
    <div id="div6">
    <td id="tdthird" class="style2" 
            style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu3</td>
    </div>
    </tr>
    </table>
    </div>
    </form
>
</body>

COMMENT USING

Trending up