Collapse and expand tree structure in Javascript
I need help to crash and deploy with Javascript. Here is my 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 you run this html you select it like
Name
when clicked on name, it displays all children
Name: Address: Subject:
Clicking the Subject button displays the Id
Name: Address: Subject: . Id
What I want here is every child should only open on parent click.
When running html, only Name will be dispaly
Name:
Clicking on the name will only display the address as a child.
Name: Address:
Onclick of Address, only Subject will display
Name:
Address:
Subject:
Then, after clicking the Subject button, the icon will appear
Name:
Address:
Subject:
. Id
How to implement this tree structure. what i am doing wrong here. please suggest me.
+4
source to share
3 answers
Check it:
$('.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 you don't want to use jQuery, you can try this:
var expander = document.querySelectorAll('.expand');
for (var i = 0; i < 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>
+8
source to share
You want to target only the first child, not a loop through everything. You should also try to separate your logic from the markup. Give unobtrusive JavaScript a read.
function toggle() {
var ls = this.parentNode.getElementsByTagName('ul')[0],
styles, display;
if (ls) {
styles = window.getComputedStyle(ls);
display = styles.getPropertyValue('display');
ls.style.display = (display === 'none' ? 'block' : 'none');
}
}
var eles = document.querySelectorAll('.ele');
Array.prototype.slice.call(eles).forEach(function (e) {
e.addEventListener('click', toggle);
});
ul ul {
display: none;
}
.ele {
cursor: pointer;
}
.ele:hover {
color: red;
}
<ul>
<li><span class="ele">One</span>
<ul>
<li><span class="ele">Two</span>
<ul>
<li><span class="ele">Three</span>
<ul>
<li><span class="ele">Four</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
+2
source to share
In pure JavaScript
document.querySelector('.tree-structure').addEventListener('click', (e) => {
const el = e.target;
const sibling = el.nextSibling.nextSibling;
if (el && el.className == 'toggle' && sibling) {
sibling.classList.toggle('show');
}
});
ul ul {
display: none;
}
.show {
display: block;
}
<ul class="tree-structure">
<li>
<button class="toggle">1st Level</button>
<ul>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">1st Level</button>
<ul>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
0
source to share