SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Show/Hide or Expand/Collapse - a bit different

    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:

    Code:
    <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>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    	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 a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - the help is appreciated.

    Yes, I purposley used the same ID to show or hide all of them at once.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  5. #5
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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....
    Last edited by beetle; Sep 10, 2002 at 12:36.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •