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: 24
Reputation: HenryGR is an unknown quantity at this point 
Solved Threads: 4
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


Views: 3632 | Replies: 2
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxexample ajaxhelp animate array automatically autoplay beta boarder box button captcha card cart codes column css date debugger decimal design developer dom download element embed enter error events firefox flash focus form frameworks getselection google gwt hint html htmlform ie7 iframe image() index java javascript javascripthelp2020 javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp4 offline onmouseover parameters paypal php player position post problem programming prototype rating redirect regex safari scale scriptlets search select size sources sql starrating textarea toggle tweet twitter validation variables w3c web webkit webservice website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC