SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    0 Post(s)
    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
    0 Post(s)
    0 Thread(s)
    HTML Code:
    <html xmlns="" >
    	Untitled Page
      <script type="text/javascript">
    function poorman_toggle(id)
    	var tr = document.getElementById(id);
    	if (tr==null) { return; }
    	var bExpand = == ''; = (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;
    			img.src = sMinus;
    function Toggle_trGrpHeader2()
        poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
    function Toggle_trGrpHeader1()
        poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
        <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 id="trRow1">
    	<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 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 id="row1">
    	<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 id="row2">
    	<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 id="row3">
    	<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>


Posting Permissions

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