Creating collapsible elements using JavaScript and CSS

I woke up from a long sleep, had a stretch, rubbed my eyes and looked at the computer screen. “Damn”, I thought, I need to learn some of that cool stuff that Web developers are doing these days. It’s still a long way to Ajax-nirvana, so I’m hoping to take things one step at a time.

This article will show you how I created a simple collapsible table for a project that I work on in my free time.

The goal is to create a search box that allows the user to choose whether or not to show advanced search options. Search boxes in some desktop applications work this way. It’s a nice concept because it reduces on-screen clutter.

1. The CSS rule uses the display property to determine whether the element implementing it is displayed or hidden. It is set to none by default meaning that the element is hidden when it’s first loaded.

#search_options { display: none }

2. The HTML file displays the table and binds the CSS formatting and JavaScript logic to it.

<form name='frmSearch' action='' method='post'>
   <table style='width:700px;border:1px solid #000000' cellpadding='3' cellspacing='3'>
      <tr><td width='100%'>
         <input type='text' name='searchterm' maxlength='128' style='width:99%' />
      </td>
      <td>
         <a href='#' onclick="return hidify_showify('search_options','search_arrow','Less','More');">
         <img src='images/arrow_down.gif' alt='Advanced Options' border='0' id='search_arrow' />
         </a>
      </td></tr>
      <tr><td width='100%' id='search_options'>
         <br />__Advanced stuff goes here__<br />
      </td></tr>
      <tr><td width='100%' align='center'>
      <input type='submit' name='submit' value='Search' />
      </td></tr>
   </table>
</form>

Notice that the table has three rows. The first shows a text box for typing the query and a button for switching between the table’s collapsed and expanded states. The second row contains the advanced options that will be shown or hidden on demand. The third shows our submit button. The interesting parts are shown in bold.

Clicking on the More/Less image calls the JavaScript function hidify_showify(). More about that later. The second table row has search_options as its ID, which is defined in the CSS as being hidden by default. The More/Less image is also given an ID, though it's just so that we can refer to it later on and change its source and alt tag depending on whether the table is collapsed or expanded.

3. The JavaScript function contains the logic that manipulates the CSS rule and switches its display property. It also checks the browser type and uses the value for display that is supported by that browser. Firefox doesn’t support the value table-cell, but IE does. If block or table-cell is always used then the contents of the table won't look too good in one of the browsers. You can surely optimize the code shown below by reducing its redundent parts, but I think the way it looks now is intuitive to understand.

<script type="text/javascript">
function hidify_showify(e_table, e_img, alt_less, alt_more) {
   if(document.getElementById) {
      var id_table = document.getElementById(e_table).style;
      var id_img = document.getElementById(e_img);

      //Set the object to table-cell if the browser is
      //Firefox and block if it's anything else.
      if(navigator.userAgent.indexOf("Firefox") != -1){
         if(id_table.display == "table-cell") {
            id_table.display = "none";
            id_img.src = "images/arrow_down.gif";
            id_img.alt = alt_more;
         }
         else {
            id_table.display = "table-cell";
            id_img.src = "images/arrow_up.gif";
            id_img.alt = alt_less;
         }
      }
      else {
         if(id_table.display == "block") {
            id_table.display = "none";
            id_img.src = "images/arrow_down.gif";
            id_img.alt = alt_more;
         }
         else {
            id_table.display = "block";
            id_img.src = "images/arrow_up.gif";
            id_img.alt = alt_less;
         }
      }
      return false;
   }
   else {
      return true;
   }
}
</script>

Note that because we're passing IDs to this function, we use document.getElementById() to get the actual elements that we can then manipulate.

That’s it. Clicking on the More/Less image invokes the JavaScript function, which then looks at the elements identified as search_options and search_arrow and decides what to set their CSS properties to.