How to collapse inner branches of the tree?

[ReportingAnalyst]

I built a tree as shown in this HTML code:


Code:
<form name="f" method=post>

<input type="radio" name="empid" id="empid" value="22979">

<a href="#" class="a_style" onclick="s_Hide('1472'); return false;">TopLevelMgr</a href>(22979)<br>
<span id="span" style="display: none">
****
<input type="radio" name="empid" id="empid" value="8208">
<a class="a_style" href="#" onclick="s_Hide('1703'); return false;">
Mgr1<font size=1>*(8208)</font>
</a><br>
********
<input type="radio" name="empid" id="empid" value="40801">
Subordinate1*<font size=1>(40801)</font>
<br>
********
<input type="radio" name="empid" id="empid" value="8089">
<a class="a_style" href="#" onclick="s_Hide('2109728'); return false;">
Mgr2<font size=1>*(8089)</font>
</a><br>
************
<input type="radio" name="empid" id="empid" value="8067">
Subordinate2*<font size=1>(8067)</font>
<br>
************
<input type="radio" name="empid" id="empid" value="28391">
Subordinate3*<font size=1>(28391)</font>
<br>
************
<input type="radio" name="empid" id="empid" value="8073">
Subordinate3*<font size=1>(8073)</font>
<br>

</form>

If you see this is a nested structure.

For the javascript:


Code:
<script type="text/javascript">
function s_Hide(el){
//obj = document.getElementById(el).style;
obj = document.getElementById('span').style;
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>

If I call this function from the toplevel manager, it collapses the entire tree and expands the entire tree through the onClick event. That works fine.

Similarly I would like to achieve this through the Sub Managers level as well. When I click on Mgr1, I should be able to expand and collapse the tree under Mger1. When I click the Sub Manager link, it collapses the entire tree instead of expanding or callapsing the sub-manager's tree of subordinates.

Any ideas as to how I can acheive the collapsing and expanding of the sub-managers without collapsing the topmanager tree?

Thanks.

 

[cLFlaVA]

there are numerous things i see here. first of all, providing us with mockup code will never resolve anything. provide us with actual code, so we can see what you're actually doing, and we may be able to help more.





*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ReportingAnalyst]

Using the example on this link:

[URL unfurl="true"]http://computer-helpforum.com/asp/nested_loop_contractible2.asp

I build a tree using VBScript. But I use the onClick event if a person is a manager so that I can see the subordinates of the manager can be drilled down. To start with:

I need to show the top level Mgrs. Only when I click on any of the mgr, I would like to see the respective mgr's subordinates.

For this to work properly, I noticed from the code (which I could see only in HTML form), the SPAN should be properly position within the VBScript. I am unable to do that.

For iRowLoop = 0 to UBound(aSubordinates, 2)

				Dim uniqueID
				'Changed this from managerid to subordinate id because we want to see the subordinates for the member_subordinate
				uniqueID  = aSubordinates(c_Subordinate, iRowLoop)

				Dim ManagerOrNot
				ManagerOrNot = IsManager(uniqueID)

				Dim indent
				indent = "    "

				If ManagerOrNot = True then
					'Is a manager
					For i = 0 to Counter
						Response.Write indent
					Next
					%>
					<input type="radio" name="empid" id="empid" value="<%=aSubordinates(c_EmpID,iRowLoop)%>">
					<a href="#" class="a_style" onclick="s_Hide('<%=aSubordinates(c_Subordinate, 0)%>'); return false;"><%=aSubordinates(c_EmpName,iRowLoop)%></a><font size=1>&nbsp;(<%=aSubordinates(c_EmpID,iRowLoop)%>)</font><br>
					<span id="<%=aSubordinates(c_Subordinate, 0)%>" style="display: none">
						<%
						Counter = Counter + 1
						Call GetSubordinates(uniqueID, Counter)
						Counter = Counter - 1
			    Else
					'Is a subordinate
					For i = 0 to Counter
						Response.Write indent
					Next
					%>
					<input type="radio" name="empid" id="empid" value="<%=aSubordinates(c_EmpID,iRowLoop)%>">
					<%=aSubordinates(c_EmpName,iRowLoop)%>&nbsp;<font size=1>(<%=aSubordinates(c_EmpID,iRowLoop)%>)</font>
					<br>
					<%
				End if 'ManagerOrNot = true or false
				%>
				</span>
				<%
			Next 'iRowLoop
			%>

 

[cLFlaVA]

1) that link isn't very helpful, because again it's not your code.
2) the code you HAVE provided is not HTML nor JavaScript.

here in the client-side JavaScript forum, we'll need to see your code as it appears in the browser.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ReportingAnalyst]

My Javascript is:

<script type="text/javascript">
function s_Hide(el){
    //obj = document.getElementById(el).style;
    obj = document.getElementById('span').style;
    (obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>

And my HTML is:

<form name="commissionReports" method=post>


	<input type="radio" name="empid" id="empid" value="22979">

	<a href="#" class="a_style" onclick="s_Hide('1472'); return false;">R Nagel</a href>(22979)<br>
	<span id="span" style="display: none">

		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" name="empid" id="empid" value="8208">
		<a href="#" class="a_style" onclick="s_Hide('1703'); return false;">P Cox</a><font size=1>&nbsp;(8208)</font><br>
		<span id="1703" style="display: none">

			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="empid" id="empid" value="40801">
			M A Iban&nbsp;<font size=1>(40801)</font>
			<br>

			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="empid" id="empid" value="8089">
			<a href="#" class="a_style" onclick="s_Hide('2109728'); return false;">A Bril</a><font size=1>&nbsp;(8089)</font><br>

			<span id="2109728" style="display: none">

				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio" name="empid" id="empid" value="8067">
				S Heath&nbsp;<font size=1>(8067)</font>
				<br>

				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio" name="empid" id="empid" value="28391">
				P Keith&nbsp;<font size=1>(28391)</font>
				<br>

				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio" name="empid" id="empid" value="8073">
				M Tootsie&nbsp;<font size=1>(8073)</font>
				<br>

			</span>

		</span>

		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" name="empid" id="empid" value="28391">
		P Kleiner&nbsp;<font size=1>(28391)</font>
		<br>

		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" name="empid" id="empid" value="9006">
		E Powell&nbsp;<font size=1>(9006)</font>
		<br>

		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" name="empid" id="empid" value="40343">
		<a href="#" class="a_style" onclick="s_Hide('1703'); return false;">J Wagger</a><font size=1>&nbsp;(40343)</font><br>

		<span id="1703" style="display: none">

			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="empid" id="empid" value="41543">
			T Brett&nbsp;<font size=1>(41543)</font>
			<br>

			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="empid" id="empid" value="40798">
			J Israel&nbsp;<font size=1>(40798)</font>
			<br>

			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="empid" id="empid" value="40802">
			S Jungfrou&nbsp;<font size=1>(40802)</font>
			<br>

			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="empid" id="empid" value="26702">
			S Kovacivich&nbsp;<font size=1>(26702)</font>
			<br>
		</span>

	</span>


</form>

I the link I sent was an example link of how I want my nested tree branches to collapse and expand. It was to give you an idea of what behaviour I wanted from my script.

Thanks.

 

[cLFlaVA]

okay, just to get your code up and working, i made the following changes:

your function is looking for an element with an id of "span", regardless of what the parameter "el" has in it. change your function to this:

function s_Hide(el){
    obj = document.getElementById(el).style;
    [red]//[/red]obj = document.getElementById('span').style;
    (obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}

your very first manager (R Nagel) is trying to open a span with an ID of "1472", yet the span inside of this manager is named "span". change "span" to "1472".

<span id="1472" style="display: none">

the last thing i noticed is your very last grouping (under J Wagger). it has an id that already exists (1703). change this to another number and everything should work as you expect.



understand, though, that this is poorly-formed HTML. spans are inline elements, not meant to be in block form. additionally, i don't think it's valid for IDs to start with a number. thirdly, this could probably done with much less markup using styled unordered lists.

however, that's another question for another forum...



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ReportingAnalyst]

Thanks for you tips and suggestion as to how to improve.

My page works, but for the last employee whose ID is same as another employee. I can check for this in the database.

Thanks.