4
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by Alison Clarke
0

There is no such command for it. You have to use Javascript and CSS to give the tree like look and feel. There are lots of readymade scripts available - both free as well as commercial ones.
Just google with something like "explorer tree in javascript"

0

Here's just a simpe one. You can tweak it according to your requirement. Like you can add "+" and "-" icons before entries and make the interface cleaner ;). What you need to know is HTML ofcourse plus little JavaScript and HTML DOM.

<script type="text/javascript">
function toggle(obj) {
	var x = obj.getElementsByTagName("ul")[0];
	if( x.style.display == "none" )
		x.style.display = "block";
	else
		x.style.display = "none"; 
}	
</script> 
<body>
<div id="menu">
    <div>
       	<span onclick="toggle(this.parentNode);">Heading 1</span>
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </div>	
    <div>
       	<span onclick="toggle(this.parentNode);">Heading 1</span>
        <ul>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </div>
</div>

Or like parry_kulk said, you can always search google for premade scripts which are far more stable and well tested.

Edited by vishesh: n/a

0

i given to code u
button code
save as -------- 10.htm ---------
look code
Source(s):
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).styl…
}
if (d) {d.style.display='block';}
}
//-->
</script>

<dl id="menu">

<dt onclick="javascript:show();"><a href="#">Menu 1</a></dt>

<dt onclick="javascript:show('smenu2');">Men… 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">sub-menu 2.1</a></li>
<li><a href="#">sub-menu 2.2</a></li>
<li><a href="#">sub-menu 2.3</a></li>
</ul>
</dd>

<dt onclick="javascript:show('smenu3');">Men… 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
</ul>
</dd>

<dt onclick="javascript:show('smenu4');">Men… 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.1</a></li>
</ul>
</dd>

</dl>

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.