SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/hide script

    After giving up on several of the accordion scripts that have been suggested, I'm just going to look for a show/hide script. I've been googling for about a half hour now, and can't find anything useful.

    What I'm looking for should be simple enough:
    I have three sections of a web page, and each contains a lot of material which I don't want users to see on page load. I want them to be able to click any of the three headlines, and that particular section will expand and show the contents. If a section is already showing, I want that to hide when another of the three sections is revealed.

    On a scale of 1-10, my JS knowledge is about a 2.

  2. #2
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    Posts
    1,232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>
    	Untitled Page
    </title>
        
      <script type="text/javascript">
    
    function poorman_toggle(id)
    {
    	var tr = document.getElementById(id);
    	if (tr==null) { return; }
    	var bExpand = tr.style.display == '';
    	tr.style.display = (bExpand ? 'none' : '');
    }
    function poorman_changeimage(id, sMinus, sPlus)
    {
    	var img = document.getElementById(id);
    	if (img!=null)
    	{
    	    var bExpand = img.src.indexOf(sPlus) >= 0;
    		if (!bExpand)
    			img.src = sPlus;
    		else
    			img.src = sMinus;
    	}
    }
    
    function Toggle_trGrpHeader2()
    {
        poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
        poorman_toggle('row1');
        poorman_toggle('row2');
        poorman_toggle('row3');
    }
    
    function Toggle_trGrpHeader1()
    {
        poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
        poorman_toggle('trRow1');
    }
    </script>
        
    </head>
    <body>
    
        <div>
        <table border="1">
        <tr id="trGrpHeader1">
    	<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td>
    </tr>
        
        <tr id="trRow1">
    	<td>&nbsp;&nbsp;Hello</td>
    	<td class="number">10</td>
    	<td class="number">1999-11-17 00:00:00</td>
    	<td class="number">1999-12-15 00:00:00</td>
    </tr>
        
        <tr id="trGrpHeader2">
    	<td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td>
    </tr>
        
        <tr id="row1">
    	<td>&nbsp;&nbsp;AROUT</td>
    	<td class="number">10743</td>
    	<td class="number">1997-11-17 00:00:00</td>
    	<td class="number">1997-12-15 00:00:00</td>
    </tr>
        <tr id="row2">
    	<td>&nbsp;&nbsp;AROUT</td>
    	<td class="number">10768</td>
    	<td class="number">1997-12-08 00:00:00</td>
    	<td class="number">1998-01-05 00:00:00</td>
    </tr>
        <tr id="row3">
    	<td>&nbsp;&nbsp;AROUT</td>
    	<td class="number">10793</td>
    	<td class="number">1997-12-24 00:00:00</td>
    	<td class="number">1998-01-21 00:00:00</td>
    </tr>
        
        </table>
        </div>
    </body>
    </html>
    http://www.aspcode.net/Javascript-hi...able-rows.aspx


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
  •