Results 1 to 3 of 3

Thread: Expand/Callapse All Help!

  1. #1
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Expand/Callapse All Help!

    Hello,

    I woould like to add 2 links to this code. One to "expand all" panels and the other to "callapse all". Also, when they expand and callapse all, the plus and minus images change accordingly. Can anyone please help?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <br>
    <style>
    
    #tables .tableMainSub {color: #517191; font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 18px; font-weight: normal; background: #D3DCEE; text-indent: 10px; vertical-align: middle; height: 20px; border: 1px solid #9FB9D6; cursor: hand; width:100%;}
    
    #tables .tableCellLeft   {vertical-align:top; border: #9FB9D6 solid 1px; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 11px; font-weight: normal;  padding:5px; }
    
    </style>
    </head><body onLoad="initPanels();">
    
    <span style="float:right; margin-bottom:3px; color:#999" class="sz10"><a href="javascript:void(0);" onClick="">Expand all</a>  |  <a href="javascript:void(0);" onClick="">Collapse all</a></span>
    
    
    <!--Start Accordion-->
    <div id="tables">
      <table id="paneltable" border="0" cellpadding="1" cellspacing="1" width="100%">
        <tr valign="top">
          <td class="tableMainSub" onClick="ToggleRowVisibility('paneltable',1);"><img src="http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif" name="paneltable.1" border="0" >&nbsp;&nbsp;Header 1</td>
        </tr>
        <tr valign="top">
          <td class="tableCellLeft"><!--Start Accordion Content-->
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            <!--End Accordion Content-->
          </td>
        </tr>
        <tr valign="top">
          <td class="tableMainSub" onClick="ToggleRowVisibility('paneltable',3);"><img src="http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif" name="paneltable.3" border="0" >&nbsp;&nbsp;Header 2</td>
        </tr>
        <tr valign="top">
          <td class="tableCellLeft"><!--Start Accordion Content-->
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            <!--End Accordion Content-->
          </td>
        </tr>
        <tr valign="top">
          <td class="tableMainSub" onClick="ToggleRowVisibility('paneltable',5);"><img src="http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif" name="paneltable.5" border="0" >&nbsp;&nbsp;Header 3</td>
        </tr>
        <tr valign="top">
          <td class="tableCellLeft"><!--Start Accordion Content-->
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            <!--End Accordion Content-->
          </td>
        </tr>
      </table>
      <!--End Accordion-->
    </div>
    <script>
    <!--
    
    function initPanels()
    {
    	// Pre-collapse some panels, as an example (assumes all panels initially visible)
    	ToggleRowVisibility("paneltable",1);
    	ToggleRowVisibility("paneltable",3);
    	ToggleRowVisibility("paneltable",5);
    
    }
    
    imgExpand   	= new Image();
    imgCollapse 	= new Image();
    imgExpand.src 	= "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/c.gif";
    imgCollapse.src = "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif";
    
    </script>
    <script>
    
    
    // Panel Functions
    /////////////////////////////////////////////////////////////////////////////////////////////////////
    function ChangeRowVisibility(tableName, strVisibility, intRowIndex)
    {
    	if(strVisibility == "visible")
    	{
    		document.getElementById(tableName).rows[intRowIndex].style.display = "block";
    	}
    	else if(strVisibility == "collapse")
    	{
    		document.getElementById(tableName).rows[intRowIndex].style.display = "none";
    	}
    }
    
    function ToggleRowVisibility(tableName, intRowIndex)
    {
    
    	var currentSetting = document.getElementById(tableName).rows[intRowIndex].style.display;
    	if (currentSetting=="none")
    	{
    		ChangeRowVisibility(tableName,"visible", intRowIndex);
    		document.images[tableName+"."+intRowIndex].src=imgCollapse.src; 
    	}
    	else
    	{
    		ChangeRowVisibility(tableName,"collapse", intRowIndex);
    		document.images[tableName+"."+intRowIndex].src=imgExpand.src; 
    	}
    }
    
    
    </script>
    </body>
    </html>

  2. #2
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    This script users expand/contract

    http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

    Maybe you could use parts of it in your script?

  3. #3
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Thanks, but I think this is a bit complex for me to leverage that code to work with mine. I am a novice.

    Does anyone else have a solution?

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
  •