Collapse (Tree) JavaScript Menue
| Previous | Home | Next |
How to create Collapse Menu in JavaScript
Step 1. Written below code in your application.
<html>
<body>
<script language="javascript"
>
function open_subCategory(n, nn) {
var i = 0
for(i=1
;i<n+1;i++) {
var sel =
document.getElementById(
'insideSubCategory'+i);
sel.style.display = 'none
';
}
var sel =
document.getElementById('insideSubCategory'
+nn);
sel.style.display = 'block
';
}
function openInside_subCategory(n, nn) {
var i = 0
for(i=1
;i<n+1;i++) {
var sel = document
.getElementById
('showProducts'+i);
sel.style.display = 'none';
}
var sel = document
.getElementById(nn);
sel.style.display = 'block';
}
</script>
<div style="display:block; cursor:pointer; font-size: large;
font-weight: bold;">
<a href="JavaScript:open_subCategory(2, 1)"
>Fruit</a></div>
<div id="insideSubCategory1"
style="border:1px solid white; display:none;">
<div style=
"display:block; padding-left:6px;">
<a href=
"JavaScript:openInside_subCategory(2, 'showProducts1')"
>Orange</a></div>
<div id="showProducts1"
style=
"margin:6px; font-size:9px; border:1px solid white; display:none;">
<div style="display:block; padding-left:12px;"
>
<a href="#"
>Yellow</a></div>
</div>
<div style=
"display:block; padding-left:6px;">
<a href="JavaScript:openInside_subCategory
(2, 'showProducts2')">Apple</a></div>
<div id="showProducts2"
style="margin:6px; font-size:9px; border:1px solid white;
display:none;">
<div style=
"display:block; padding-left:12px;"><a href=
"#">Red</a></div>
<div style="display:block; padding-left:12px;"
><a href="#"
>Green</a></div>
</div>
<div style="display:block; padding-left:6px;"
> <a href=
"JavaScript:openInside_subCategory(2, 'showProducts3')"
>Banana</a></div>
<div id="showProducts3"
style="margin:6px; font-size:9px; border:1px solid white; display:none;"
>
<div style="display:block; padding-left:12px;"
><a href="#"
>Yellow</a></div>
</div> </div>
<div style="display:block; cursor:pointer;
font-size: large; font-weight: bold;">
<a href="JavaScript:open_subCategory(2, 2)
">Vegitable</a></div>
<div id="insideSubCategory2"
style="border:1px solid white; display:none;"
>
<div style="display:block; padding-left:6px;"
>
<a href="JavaScript:openInside_subCategory(3,'showProducts4')
">Tomato</a></div>
<div id="showProducts4"
style="margin:6px; font-size:9px; border:1px solid white;
display:none;">
<div style="display:block; padding-left:12px;"
><a href="#"
>Red</a></div>
</div>
<div style=
"display:block; padding-left:6px;">
<a href=
"JavaScript:openInside_subCategory(3, 'showProducts5')"
>Brinjal</a></div>
<div id="showProducts5"
style="margin:6px;
font-size:9px; border:1px solid white; display:none;"
>
<div style="display:block; padding-left:12px;"
><a href="#"
>Purple</a></div>
<div style="display:block; padding-left:12px;"
><a href=
"#">White</a></div>
</div>
<div style=
"display:block; padding-left:6px;">
<a href=
"JavaScript:openInside_subCategory(3, 'showProducts6')"
>Pea</a></div>
<div id="showProducts6"
style=
"margin:6px; font-size:9px; border:1px solid white; display:none;">
<div style="display:block; padding-left:12px;"
><a href="#">Green</a></div>
</div>
</div>
<div style="display:block; cursor:pointer; font-size:
large; font-weight: bold;">
<a href="JavaScript:open_subCategory(2, 3)"
>Grains</a></div>
<div id="insideSubCategory3"
style="border:1px solid white; display:none;"
>
<div style="display:block; padding-left:6px;"
>
<a href="JavaScript:openInside_subCategory(4, 'showProducts7')
">Rice</a></div>
<div id="showProducts7"
style="margin:6px; font-size:9px; border:1px solid white; display:none;"
>
<div style="display:block; padding-left:12px;"
><a href="/"
>Sabarmati</a></div>
<div style="display:block; padding-left:12px;"
><a href="/"
>Basmati</a></div>
<div style="display:block; padding-left:12px;"
><a href="/"
>Saryu</a></div>
</div>
<div style="display:block; padding-left:6px;"
>
<a href="JavaScript:openInside_subCategory
(4, 'showProducts8')">Wheat</a></div>
<div id="showProducts8"
style=
"margin:6px; font-size:9px; border:1px solid white; display:none;">
<div style="display:block; padding-left:12px;"
><a href="/"
>Shakti</a></div>
<div style=
"display:block; padding-left:12px;"
><a href=
"/"
>Ashirvad</a></div>
</div>
<div style=
"display:block; padding-left:6px;">
<a href=
"JavaScript:openInside_subCategory(4, 'showProducts9')">Pulse</a></div>
<div id="showProducts9"
style="margin:6px; font-size:9px; border:1px solid white; display:none;"
>
<div style="display:block;
padding-left:12px;"><a href=
"/">Chana</a></div>
<div style="display:block;
padding-left:12px;"><a href=
"/">Matar</a></div>
</div>
</div>
</body>
</html>
Step 2. Run the Application.
| Previous | Home | Next |