Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Tree view control in HTML?
- Thread starter sjh
- Start date
HTML has no abilities for this. But there's a chap in the Javascript forum who has done this using javascript. I don't have the thread but it's just been in the last week or so. Take a look there...
There's always a better way. The fun is trying to find it!
There's always a better way. The fun is trying to find it!
Came across this...might help
BillyRayPreachersSon
Programmer
This code should do everything you've asked for:
Code:
<html>
<head>
<style type="text/css">
.subNode {
display: none;
}
</style>
<script type="text/javascript">
<!--
function toggleNode(nodeHref) {
var nodeData = nodeHref.nextSibling;
while (true) {
if (nodeData.nodeType == 1 && nodeData.tagName.toLowerCase() == 'div') break;
nodeData = nodeData.nextSibling;
}
if (nodeData && nodeData.className == 'subNode') {
var displayed = nodeHref.childNodes[0].nodeValue == '[-]';
if (displayed) {
nodeHref.childNodes[0].nodeValue = '[+]';
nodeData.style.display = 'none';
} else {
nodeHref.childNodes[0].nodeValue = '[-]';
nodeData.style.display = 'block';
}
}
}
//-->
</script>
</head>
<body>
<div>
<a href="javascript:void(0);" onclick="toggleNode(this);">[+]</a> Item 1
<div class="subNode">
PUT ITEM 1 DATA HERE
</div>
</div>
<div>
<a href="javascript:void(0);" onclick="toggleNode(this);">[+]</a> Item 2
<div class="subNode">
PUT ITEM 2 DATA HERE
</div>
</div>
<div>
<a href="javascript:void(0);" onclick="toggleNode(this);">[+]</a> Item 3
<div class="subNode">
<div>
<a href="javascript:void(0);" onclick="toggleNode(this);">[+]</a> Item 3, 1
<div class="subNode">
<div>
<a href="javascript:void(0);" onclick="toggleNode(this);">[+]</a> Item 3, 1, 1
<div class="subNode">
PUT ITEM 3, 1, 1 DATA HERE
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>As you can see, it can easily handle sub nodes and sub-sub nodes.. In fact, as long as you keep the structure as-is, you can go as many levels deep as you want.
Of course, you'll probably want to style it for your own needs, but this does everything you've asked for.
Hope this helps,
Dan
- Status
Similar threads
- Locked
- Question
