How to Make Cells Collapsible in Dreamweaver

HTML tables contain rows and cells.

Adobe Dreamweaver enables you to create Web pages and manage your website using a variety of tools and languages. You can create your tables using hand coded HTML or Dreamweaver table insertion tools. Include a JavaScript function using the “display” method to add interactive functionality to the tables, such as collapsible rows.

Instructions

1. Open the webpage that contains your table.

2. Type the JavaScript function for collapsing and turning off the collapse of the row. Place the code above the “</head>” tag:

   <script>
   function doCollapse(rowname)
   {
   theElement = document.getElementById(rowname);
   if(theElement.style.display == 'none'){
   theElement.style.display = '';
   }else {
   theElement.style.display = 'none';
   }
   return false;
   }
   </script>

3. Type the JavaScript “onClick” function in the element that you want to control the collapse:

   <p1 onClick=" doCollapse ('r1');">A paragraph above the table</p>
   <table >
   <tr id=”r1”><td>First row and first cell</td><td>First row and second cell</td></tr>
   <tr><td>Second row and first cell</td><td> Second row and second cell</td></tr>
   <tr ><td>Third row and first cell</td><td> Third row and second cell</td></tr>
   </table>

   When the paragraph is clicked, the "doCollapse " function either collapses the row that contains the “r1” id or expands the row, based on whether the row is collapsed or not when the function is called.

Resources

• Adobe: About Tables
• W3Schools: JavaScript Tutorial