How to Make Collapse Effect in CSS

The CSS collapse property lets you hide a table row, so users can hide and show sections of your Web page. You use JavaScript to dynamically set the table row to collapse when a button is clicked. The CSS collapse effect makes it more convenient to hide table rows instead of manually looping through each row and hiding the content individually.

Instructions

1. Right-click the HTML file that contains your table, and select "Open With." Click your HTML editor in the list of programs to load the code in the editor.

2. Create the JavaScript code to collapse or expand the table rows. The following code shows you how to toggle between the two states:

   function collapse() {
   if (document.getElementById("table").style.visibility == "collapse") {
   document.getElementById("table").style.visibility = "visible";
   } else {
   document.getElementById("table").style.visibility = "collapse";
   }
   }

   The function uses the CSS collapse property to collapse the table if the visibility property is visible. If the table is already collapsed, the table rows are shown.

3. Link the JavaScript function to the button that you use to collapse and show the table rows. The following code shows you how to create the button to collapse the table:

   <input type="button" Value="Collapse Rows" onclick="collapse">

References

• W3 Schools: CSS visibility Property