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>