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 strongm 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?

Status
Not open for further replies.

sjh

Programmer
Oct 29, 2001
263
US
Hi, is it possible to make a tree view control work with HTML? (i.e., Click on a parent link and display the child nodes.) If so, can someone give me advice on how to code it?

Thank you!
Susie
 
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!
 
sjh - Please let me know what you find out. I would like to know too. Thanks.
 

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
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top