html - Collapse and Expand Tree structure in Javascript -
i need on collapse , expand using javascript. here running code (.html)
<h2>test</h2> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-16"> <title></title> <script type="text/javascript"> function toggledisplay(element) { element.style.display = element.style.display === 'none' ? '' : 'none'; }; function toggledisplayall(elements) { for(var i=0; i<elements.length; i++) { toggledisplay(elements[i]); } } </script> </head> <body> <ul> <a onclick="toggledisplayall(this.parentnode.getelementsbytagname('ul')); return false;" href="#">name:</a> <ul style="display:none;"> <a onclick="toggledisplayall(this.parentnode.getelementsbytagname('ul')); return false;" href="#">address: </a> <ul style="display:none;"> <a onclick="toggledisplayall(this.parentnode.getelementsbytagname('li')); return false;" href="#">subject: </a> <ul style="display:none;"> <li style="display:none;">id </li> </ul> </ul> </ul> </ul> </body> </html>
if run html, out put as
name
on click of name, showing child elements
name: address: subject:on click of subject showing id
name: address: subject: . idwhat want here each child should open on parent click.
when run html, name dispaly
name:on click of name, address displayed child element.
name: address:
onclick of address, subject display
name: address: subject:
than on click of subject, id show
name: address: subject: . id
how implement tree structure. doing wrong here. please suggest me.
check this:
$('.expand').click(function() { $('ul', $(this).parent()).eq(0).toggle(); });ul li ul { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a class="expand">root</a> <ul> <li> <a class="expand">child</a> <ul> <li> <a class="expand">super child</a> </li> </ul> </li> </ul> </li> </ul>edit
if don't want use jquery, can try this:
var expander = document.queryselectorall('.expand'); (var = 0; < expander.length; ++i) { expander[i].onclick = function() { var ul = this.parentelement.queryselectorall('ul')[0]; if (ul.offsetheight > 0) { ul.style.display = 'none'; } else { ul.style.display = 'block'; } } }ul li ul { display: none; } <ul> <li> <a class="expand">root</a> <ul> <li> <a class="expand">child</a> <ul> <li> <a class="expand">super child</a> </li> </ul> </li> </ul> </li> </ul>
Comments
Post a Comment