Expandable Rows Table Template

Keep your tables clean and scannable by hiding secondary information in expandable rows.

With a single click, users can reveal a hidden row containing more details, perfect for order summaries, user profiles, or any data with primary and secondary importance.

Screenshot of a table where one row is expanded to show more details underneath it.

Get Source Code → Preview →

About this Expandable Table

This "accordion" or "expandable row" pattern is a fantastic way to manage information density. The main table shows only the most critical data. A dedicated hidden row, placed directly after a main row in the HTML, contains additional details.

The JavaScript logic is simple:

  1. When a user clicks on a main row (specifically, one with the class .row-expandable), the script finds the very next row in the DOM.
  2. It then toggles a "visible" class on that next row, which changes its display property.
  3. A class is also toggled on the clicked row, which triggers a CSS transform on the + icon, rotating it 45 degrees to look like an x (the close symbol). This could easily be modified to switch between + and - if you prefer.

The expandable row itself contains a td with a colspan attribute, allowing its content to span the full width of the table, perfect for displaying free-form details.

Features

Ideal Use Cases

Code

Here's the full code, including the HTML structure, CSS for the effect, and JavaScript to manage the state:

View Output