I need only Root node to be expanded by default. Can anybody help me with this. Following is the HTML and Jquery.
It has a expand and collapse functionality. When u click on text in a tree it will expand and collapse.
I have added in JSFiddle http://jsfiddle.net/FFc7z/
<div>
<ul id ="expList">
<li>
Root
<ul>
<li>
Child 1
<ul>
<li>
Subchild 1</li>
<li>
Subchild 2</li>
<li>
Subchild 3</li>
</ul>
</li>
<li>
Child 2
<ul>
<li>
Subchild 1</li>
<li>Subchild 2</li>
</ul>
</li>
<li>
child3
</li>
</ul>
</li>
</ul>
</div>
Jquery
$(document).ready( function() {
prepareList()
});
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
};
Add
$('#expList>li>ul').show();
as a last line of prepareList() function