asked on

tree view display in html

Hi Expert,

I want to display a tree view in html.

for example,

default page is

+Group1
+Group2

if user click on "+" on Group1, then Group1 need to be expand.
+Group1
Program1
Program2
+Group2

whole page is

+Group1
Program1
Program2
+Group2
Program1
Program2

Thanks in advance.

und3ath

Here you have complete solution

<html>
<head>
</head>
 
<body>
<span style="cursor:pointer;" onclick="show_hide('g1');">+</span>Group1
<div id="g1" style="display:none;">
<a href="#">&nbsp;Program 1</a><br>
<a href="#">&nbsp;Program 2</a><br>
</div><br>
<span style="cursor:pointer;" onclick="show_hide('g2');">+</span>Group2
<div id="g2" style="display:none;">
<a href="#">&nbsp;Program 3</a><br>
<a href="#">&nbsp;Program 4</a><br>
</div>
</body>
<script type="text/javascript">
function show_hide(id){
document.getElementById(id).style.display=(document.getElementById(id).style.display=='block'?'none':'block');
}
</script>
 
</html>

Open in new window

dshi15

ASKER

Thank you very much, it works, I just have one question left. If user click on Group1, how to make the "+" to "-", then they click on it again, "-" change back to "+" ? Such like window Explore.

und3ath

a little change to code:

<html>
<head>
</head>
 
<body>
<span id="main_1" style="cursor:pointer;" onclick="show_hide('g1');">+</span>Group1
<div id="g1" style="display:none;">
<a href="#">&nbsp;Program 1</a><br>
<a href="#">&nbsp;Program 2</a><br>
</div><br>
<span id="main_2" style="cursor:pointer;" onclick="show_hide('g2');">+</span>Group2
<div id="g2" style="display:none;">
<a href="#">&nbsp;Program 3</a><br>
<a href="#">&nbsp;Program 4</a><br>
</div>
</body>
<script type="text/javascript">
function show_hide(id){
document.getElementById(id).style.display=(document.getElementById(id).style.display=='block'?'none':'block');
var z=document.getElementById('main_'+id.slice(-1));
if(z.innerHTML=='+')
	z.innerHTML='-';
else
	z.innerHTML='+';
 
}
</script>
 
</html>

Open in new window

dshi15

ASKER

thank you very much, it works, could you explain a little bit of id.slice, it like index?

und3ath

Little change to the code:

slice(-1) to slice(1)

Yes, I want to extract index from 'g1' ...

dshi15

ASKER

slice(1) means last character of id="main_1" ? slice(-1) works too.

ASKER CERTIFIED SOLUTION

und3ath

membership