Sample jquery tree menu 2011

Sample jquery tree menu 2011

You can easily create tree view items. For doing so add the following HTML snippet in your HTML file.

<ul>

<li id="m1">Main 1</li>

<div id="l1cover">

<ul>

<li>1</li>

<li id="inLst">2</li>

<div id="inCt1">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</div>

<li>3</li>

</ul>

</div>

</ul>

<ul>

<li id="m2">Main 2</li>

<div id="l2cover">

<ul>

<li id="inLst2">1</li>

<div id="inCt2">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</div>

<li>2</li>

<li>3</li>

</ul>

</div>

</ul>

Now for making your treeview work please add the following jQuery snippet:

 Collapse | Copy Code

 $("#m1").click(function () {

$("#l1cover").toggle("fold", 1000);

});

$("#m2").click(function () {

$("#l2cover").toggle("fold", 1000);

});

$("#inLst").click(function () {

$("#inCt1").toggle("fold", 1000);

});

$("#inLst2").click(function () {

$("#inCt2").toggle("fold", 1000);

});

Output: 

• Main 1
  • 1
  • 2
    • 1
    • 2
    • 3
  • 3
• Main 2
  • 1
    • 2
    • 2
    • 3
  • 2
  • 3