Show/Hide or Expand/Collapse - a bit different

[westmich]

I have some server-side code that creates a table from a database query. The basic idea is that there are group leaders and each leader has one or more members. I created the ID dynamically from the query.

When a user clicks the button next to a group leader, the members should hide or show, opposite of current display.

Here's what I have so far:

<script language="JavaScript">
	function showHide(elem)	{		
                if(elem.style.display == "none")	{
			elem.style.display = "";
		}else{
			elem.style.display = "none";
		}
	}
</script>
<form>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
	<td><input type="button" value="Show/Hide" onclick="javascript: showHide('18')"></td>
	<td colspan="2">Julie & Mark Maibach</td>
	<td colspan="2">&nbsp;</td>
</tr>

<tr class="rowspan1" style="display:none" id="18">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="121" name="MemberID"></td>
	<td>Hartzler, Lisa</td>
	<td>330-669-3937</td>
	<td>rdhfamily@valkyrie.net</td>
</tr>

<tr class="rowspan0" style="display:none" id="18">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="429" name="MemberID"></td>
	<td>HERSHBERGER, VERNON</td>
	<td>330-359-5840</td>
	<td>vernon@mulletcabinet.com</td>
</tr>

<tr class="rowspan1" style="display:none" id="18">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="156" name="MemberID"></td>
	<td>Maibach, Mark</td>
	<td>9392491</td>
	<td>mhf1905@bright.net</td>
</tr>

<tr class="rowspan0" style="display:none" id="18">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="406" name="MemberID"></td>
	<td>Miller, Reuben</td>
	<td>330-674-6768</td>
	<td>reuben@mulletcabinet.com</td>
</tr>

<tr>
	<td><input type="button" value="Show/Hide" onclick="javascript: showHide('22')"></td>
	<td colspan="2">Kelly & Scott Bodager</td>
	<td colspan="2">&nbsp;</td>
</tr>

<tr class="rowspan1" style="display:none" id="22">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="232" name="MemberID"></td>
	<td>Anderson, Mary</td>
	<td>330-674-1071</td>
	<td>andys@valkyrie.net</td>
</tr>

<tr class="rowspan0" style="display:none" id="22">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="468" name="MemberID"></td>
	<td>Buckingham Jr., Dwane</td>
	<td>330-925-3436</td>
	<td>dbuckingham@neo.rr.com</td>
</tr>

<tr class="rowspan1" style="display:none" id="22">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="206" name="MemberID"></td>
	<td>Coffey, Paula and George</td>
	<td>435-6853</td>
	<td>skicat@bright.net</td>
</tr>

<tr class="rowspan0" style="display:none" id="22">
	<td nowrap>&nbsp;&nbsp;</td>
	<td><input type="Checkbox" value="364" name="MemberID"></td>
	<td>Elliston, Sue</td>
	<td>330-435-4131</td>
	<td>SEllstn@aol.com</td>
</tr>	
</table>
</form>
</body>
</html>

[beetle]

You are passing the ID (as a string) to the function showHide() which is expecting and object for the 'elem' parameter. You need to get the object first with your id

	function showHide(elemID)	{		
                var elem = document.getElemenById(elemID);
                if(elem.style.display == "none")	{
			elem.style.display = "";
		}else{
			elem.style.display = "none";
		}
	}

Also, your id-generator may be busted, because it seems that some of the id's are duplicates, which will break the javascript.

[beetle]

Ohhhh, I see why you have multiple ID's being the same. But that won't work. There is a solution, but I don't have the time right now to show it. Perhaps when I get back from lunch

[westmich]

Thanks - the help is appreciated.

Yes, I purposley used the same ID to show or hide all of them at once.

[westmich]

Well, I got it to work. I ended up solving it on the server side by writing a function for each grouping dynamically. It's actually simpler for me since I know the server-side so much more then Javascript.

One problem, though, "getElemenByID" looked like a typo. So I changed it to "getElementByID". Niether work in Netscape 4.x, though.

[beetle]

Ya, sorry. That's a typo

getElementById()

NS 4.x??? You want it to work with NS4?? If so, use this function to replace the getElementById() method

function getNode(id) {
	return (typeof document.layers != 'undefined') ? document.layers[id] : (document.getElementById || document.all)(id)
	}

Originally posted by westmich
writing a function for each grouping dynamically

Maybe not the best idea depending on how many pageviews you expect to get each month, and how much you pay for your hosting. That's a lost of wasted HTML being transmitted to the client-side....