JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Expand/Callapse All Help!

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2008
Posts: 3
Reputation: bigalo is an unknown quantity at this point 
Solved Threads: 0
bigalo bigalo is offline Offline
Newbie Poster

Expand/Callapse All Help!

 
0
  #1
Apr 11th, 2008
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?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <br>
  7. <style>
  8.  
  9. #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%;}
  10.  
  11. #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; }
  12.  
  13. </style>
  14. </head><body onLoad="initPanels();">
  15.  
  16. <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>
  17.  
  18.  
  19. <!--Start Accordion-->
  20. <div id="tables">
  21.   <table id="paneltable" border="0" cellpadding="1" cellspacing="1" width="100%">
  22.     <tr valign="top">
  23.       <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>
  24.     </tr>
  25.     <tr valign="top">
  26.       <td class="tableCellLeft"><!--Start Accordion Content-->
  27.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  28.         <!--End Accordion Content-->
  29.       </td>
  30.     </tr>
  31.     <tr valign="top">
  32.       <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>
  33.     </tr>
  34.     <tr valign="top">
  35.       <td class="tableCellLeft"><!--Start Accordion Content-->
  36.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  37.         <!--End Accordion Content-->
  38.       </td>
  39.     </tr>
  40.     <tr valign="top">
  41.       <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>
  42.     </tr>
  43.     <tr valign="top">
  44.       <td class="tableCellLeft"><!--Start Accordion Content-->
  45.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  46.         <!--End Accordion Content-->
  47.       </td>
  48.     </tr>
  49.   </table>
  50.   <!--End Accordion-->
  51. </div>
  52. <script>
  53. <!--
  54.  
  55. function initPanels()
  56. {
  57. 	// Pre-collapse some panels, as an example (assumes all panels initially visible)
  58. 	ToggleRowVisibility("paneltable",1);
  59. 	ToggleRowVisibility("paneltable",3);
  60. 	ToggleRowVisibility("paneltable",5);
  61.  
  62. }
  63.  
  64. imgExpand   	= new Image();
  65. imgCollapse 	= new Image();
  66. imgExpand.src 	= "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/c.gif";
  67. imgCollapse.src = "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif";
  68.  
  69. </script>
  70. <script>
  71.  
  72.  
  73. // Panel Functions
  74. /////////////////////////////////////////////////////////////////////////////////////////////////////
  75. function ChangeRowVisibility(tableName, strVisibility, intRowIndex)
  76. {
  77. 	if(strVisibility == "visible")
  78. 	{
  79. 		document.getElementById(tableName).rows[intRowIndex].style.display = "block";
  80. 	}
  81. 	else if(strVisibility == "collapse")
  82. 	{
  83. 		document.getElementById(tableName).rows[intRowIndex].style.display = "none";
  84. 	}
  85. }
  86.  
  87. function ToggleRowVisibility(tableName, intRowIndex)
  88. {
  89.  
  90. 	var currentSetting = document.getElementById(tableName).rows[intRowIndex].style.display;
  91. 	if (currentSetting=="none")
  92. 	{
  93. 		ChangeRowVisibility(tableName,"visible", intRowIndex);
  94. 		document.images[tableName+"."+intRowIndex].src=imgCollapse.src; 
  95. 	}
  96. 	else
  97. 	{
  98. 		ChangeRowVisibility(tableName,"collapse", intRowIndex);
  99. 		document.images[tableName+"."+intRowIndex].src=imgExpand.src; 
  100. 	}
  101. }
  102.  
  103.  
  104. </script>
  105. </body>
  106. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 22
Reputation: HenryGR is an unknown quantity at this point 
Solved Threads: 3
HenryGR's Avatar
HenryGR HenryGR is offline Offline
Newbie Poster

Re: Expand/Callapse All Help!

 
0
  #2
Apr 13th, 2008
The easiest way is to create a new function on you JS code, simple as

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function exall() {
  2. 	for (inde=1;inde<=5;inde=inde+2) {
  3. 		ToggleRowVisibility("paneltable",inde);
  4. 	}
  5. }
You keep going, have a Nice day!
Henry.

Before printing this message, make sure is necessary.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 3
Reputation: bigalo is an unknown quantity at this point 
Solved Threads: 0
bigalo bigalo is offline Offline
Newbie Poster

Re: Expand/Callapse All Help!

 
0
  #3
Aug 25th, 2008
Thanks HenryGR! This worked great!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart close codes column cookies css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover paypal pdf php player position post problem programming prototype redirect regex safari scale scriptlets scroll search security select software sql text textarea toggle unicode variables w3c website window windowofwords windowsxp
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC