Expandable Rows Table

<!DOCTYPE html>
<title>My Example</title>

/* This is the row that is hidden/shown */
.expandable-table .row-details {
    display: none; /* Hidden by default */
}
.expandable-table .row-details.visible {
    display: table-row; /* Show it when it has the 'visible' class */
}
.expandable-table .row-details td {
    background-color: #f8f9fa;
    padding: 20px;
    border-bottom: 2px solid #ccc; /* A thicker border to separate it */
}

/* Styling for the expand/collapse icon */
.expandable-table .expand-icon {
    font-weight: bold;
    transition: transform 0.3s ease;
    display: inline-block;
}
.expandable-table .row-expandable.open .expand-icon {
    transform: rotate(45deg);
}

</style>

<table class="expandable-table" id="myExpandableTable">
    <thead>
        <tr>
            <th scope="col" style="width: 5%;"></th>
            <th scope="col">Order ID</th>
            <th scope="col">Date</th>
            <th scope="col">Total</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        
        <tr class="row-expandable">
            <td><span class="expand-icon">+</span></td>
            <td>#5501</td>
            <td>2024-08-20</td>
            <td>$199.50</td>
            <td>Delivered</td>
        </tr>
        <tr class="row-details">
            <td colspan="5">
                <div>
                    <strong>Items Purchased:</strong>
                    <ul>
                        <li>Product A (1) - $99.50</li>
                        <li>Product B (2) - $100.00</li>
                    </ul>
                    <strong>Shipping Address:</strong> 123 Main St, Anytown, USA
                </div>
            </td>
        </tr>
        
        
        <tr class="row-expandable">
            <td><span class="expand-icon">+</span></td>
            <td>#5502</td>
            <td>2024-08-21</td>
            <td>$45.00</td>
            <td>Shipped</td>
        </tr>
        <tr class="row-details">
            <td colspan="5">
                <div>
                    <strong>Items Purchased:</strong>
                    <ul>
                        <li>Product C (1) - $45.00</li>
                    </ul>
                    <strong>Shipping Address:</strong> 456 Oak Ave, Somecity, USA
                </div>
            </td>
        </tr>
        
        
         <tr class="row-expandable">
            <td><span class="expand-icon">+</span></td>
            <td>#5503</td>
            <td>2024-08-22</td>
            <td>$88.75</td>
            <td>Processing</td>
        </tr>
        <tr class="row-details">
            <td colspan="5">
                <div>
                    <strong>Items Purchased:</strong>
                    <ul>
                        <li>Product D (3) - $75.00</li>
                        <li>Product E (1) - $13.75</li>
                    </ul>
                    <strong>Shipping Address:</strong> 789 Pine Ln, Otherville, USA
                </div>
            </td>
        </tr>
    </tbody>
</table>

table.addEventListener('click', function(e) {
        // Find the closest ancestor 'tr' that is expandable
        const expandableRow = e.target.closest('tr.row-expandable');
        if (!expandableRow) return;

// Find the very next TR element, which is the details row
        const detailsRow = expandableRow.nextElementSibling;
        if (detailsRow && detailsRow.classList.contains('row-details')) {
            expandableRow.classList.toggle('open');
            detailsRow.classList.toggle('visible');
        }
    });
}

// Initialize the functionality
enableExpandableRows('myExpandableTable');

</script>