JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<div class="alertsList">
    <table>
        <tbody>
            <tr>
                <th></th>
                <th>Order Id</th>
                <th>Alert Name</th>
                <th>From</th>
                <th>Actionable</th>
                <th>State</th>
                <th>When</th>
                <tr class="alertRow" state="Active">
                    <td>
                        <img title="Severity1" src="/Content/Images/OrderIcons/problem.png">
                    </td>
                    <td>1043906</td>
                    <td>DC is not approved for EG</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-10-21T06:37:21.42</td>
                </tr>
                <tr class="alertDetails">
                    <td colspan="7">The DC you selected is not approved for your Property Group. If you need any help, please reach out to
                        <dl></dl>
                    </td>
                </tr>
                <tr class="alertRow" state="Active">
                    <td>
                        <img title="Severity2" src="/Content/Images/OrderIcons/warning.png">
                    </td>
                    <td>1042693</td>
                    <td>Order is about to expire</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-10-09T19:43:59.903</td>
                </tr>
                <tr class="alertDetails">
                    <td colspan="7">This order is about to expire. If you do not complete deployment scheduling before Requested RTEG, order will be expired</td>
                </tr>
                <tr class="alertRow" state="Active">
                    <td>
                        <img title="Severity2" src="/Content/Images/OrderIcons/warning.png">
                    </td>
                    <td>1043906</td>
           ...

CSS

.toggle {

    background:dodgerblue;

}

.toggle::before {

    content:"+"

}

.toggle.expanded::before {

    content:"-"

}

tfoot tr {

    background:#eee;

}

JavaScript

$('.alertRow').has(".Closed")
// group them together in a tfoot and insert it before tbody
.insertBefore(".alertsList table tbody").wrapAll("<tfoot></tfoot>")
// inject the hidden divs inside the columns for animating
.find("td").wrapInner("<div style='display:none'/>").end()
// insert the toggle option before the first inactive row
.first().before("<tr><td class='toggle' colspan='5'> Closed Alerts </td></tr>");

$(".alertsList table").on("click", ".toggle", function () {
    // following class keeps track of the cuurrent state
    $(this).toggleClass("expanded")
    // find all the injected divs and toggle them
    .closest("tr").nextAll("tr").find('td  div').slideToggle(700);
});