By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,873 Members | 1,034 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Expand / Collapse FIELDSET

P: 1
I wrote simple code for expandable/collapsable fieldsets. You can try it yourselves:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Test</title>
  6.  
  7. <style type="text/css">
  8. <!--
  9. a { color:blue; cursor:pointer; }
  10. -->
  11. </style>
  12. <script type="text/javascript">
  13. function constructCollapsableFieldsets() 
  14. {
  15.     var allFsets = document.getElementsByTagName('fieldset');
  16.     var fset = null;
  17.     for (var i=0; i<allFsets.length; i++)
  18.     {
  19.         fset = allFsets[i];
  20.         if(fset.attributes['collapsed']!=null)
  21.             constructCollapsableFieldset(fset, fset.attributes['collapsed'].value);
  22.     }
  23. }
  24.  
  25. //for collapsable fieldset:
  26. function constructCollapsableFieldset(fset, collapsed)
  27. {
  28.     //main content:
  29.     var divContent = fset.getElementsByTagName('div')[0];
  30.     if (divContent == null)
  31.         return;
  32.  
  33.     if (collapsed == 'true')
  34.         divContent.style.display = 'none';
  35.  
  36.     //+/- ahref:
  37.     var ahrefText = getAHrefForToogle(collapsed);
  38.  
  39.     //legend:
  40.     var legend = fset.getElementsByTagName('legend')[0];
  41.     if (legend != null)
  42.         legend.innerHTML = ahrefText + legend.innerHTML;
  43.     else
  44.         fset.innerHTML = '<legend>' + ahrefText + '</legend>' + fset.innerHTML;
  45. }
  46.  
  47. function getAHrefForToogle(collapsed)
  48. {
  49.     var ahrefText = "<a onClick='toogleFieldset(this.parentNode.parentNode);' style='text-decoration: none;'>";
  50.     ahrefText = ahrefText + getExpanderItem(collapsed) + "</a>&nbsp;";
  51.     return ahrefText;
  52. }
  53.  
  54. function getExpanderItem(collapsed)
  55. {
  56.     var ecChar;
  57.     if (collapsed=='true')
  58.         ecChar='+';
  59.     else
  60.         ecChar='-';
  61.  
  62.     return ecChar;
  63. }
  64.  
  65. function toogleFieldset(fset)
  66. {
  67.     var ahref = fset.getElementsByTagName('a')[0];
  68.     var div = fset.getElementsByTagName('div')[0];
  69.  
  70.     if (div.style.display != "none")
  71.     {
  72.         ahref.innerHTML=getExpanderItem('true');
  73.         div.style.display = 'none';
  74.     }
  75.     else
  76.     {
  77.         ahref.innerHTML=getExpanderItem('false');
  78.         div.style.display = '';
  79.     }
  80. }
  81. //-->
  82. </script>
  83. </head>
  84.  
  85. <body onLoad="constructCollapsableFieldsets();">
  86.  
  87. <fieldset collapsed="true">
  88.     <legend>Bububu</legend>
  89.     <div>
  90.         This is collapsable fieldset with caption (legend).
  91.         Fieldset is initially collapsed.
  92.     </div>
  93. </fieldset>
  94. <br />
  95. <fieldset collapsed="false">
  96.     <div>
  97.         This is collapsable fieldset with no caption (legend).
  98.         Fieldset is initially expanded.
  99.     </div>
  100. </fieldset>
  101. <br />
  102. <fieldset>
  103. <legend>Look here</legend>
  104. <div>
  105.     This fieldset is not collapsable.. 
  106.     To set it collapseble is needed to type
  107.     &lt;fieldset collapsed="false" ...
  108.     or &lt;fieldset collapsed="true" ...
  109. </div>
  110. </fieldset>
  111. </body>
  112. </html>
  113.  
Oct 10 '08 #1
Share this Article
Share on Google+
1 Comment


P: 1
Not bad. A few hints if I may:

* try using classes, not attributes. This will allowed the document to be validated for HTML/javascript. eg class="fieldset_collapsed" : )

* try using unobtrusive javascript, a seperate .JS file with all functions in one object.

* if there is no inner DIV, let your javascript create it, instead of returning. Saves the programmer from having to add a silly DIV each time. Or just always create one, if that's easier.

Nice work tho!
Apr 30 '09 #2