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.

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:
- 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. - It then toggles a "visible" class on that next row, which changes its
display
property. - A class is also toggled on the clicked row, which triggers a CSS transform on the
+
icon, rotating it 45 degrees to look like anx
(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
- Keeps UI Clean: The primary table view remains uncluttered and easy to scan.
- On-Demand Detail: Provides rich information to the user without navigating to a new page.
- Smooth Transitions: Uses CSS transitions for a smooth opening and closing effect.
- Self-Contained: Built with simple, dependency-free JavaScript.
Ideal Use Cases
- E-commerce order history, where clicking an order reveals the specific products purchased.
- User lists, where clicking a user reveals their full profile or bio.
- Project management tables, where clicking a task reveals sub-tasks or comments.
Code
Here's the full code, including the HTML structure, CSS for the effect, and JavaScript to manage the state: