JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
    <tr>
        <td style='cursor:pointer; width:20%; text-align:left;' id='header'>
            <label style='cursor:pointer;'>	<b id='header01'>▲ Customer Details</b>

            </label>
        </td>
    </tr>
    <tr>
        <td style='widtd:20%; text-align:left;'>
            <div id='content' class='content01'>
                <table cellspacing='0' cellpadding='0' id='form_table'>
                    <tr>
                        <td>A/C ID</td>
                        <td>:</td>
                        <td>3000/A01</td>
                    </tr>
                    <tr>
                        <td>A/C ID</td>
                        <td>:</td>
                        <td>3000/A01</td>
                    </tr>
                    <tr>
                        <td>A/C ID</td>
                        <td>:</td>
                        <td>3000/A01</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

CSS

#header {
    background: #cedbe9;
    /* Old browsers */
    background: -moz-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cedbe9', endColorstr='#26558b', GradientType=0);
    /* IE6-9 */
}
#header:hover {
    -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.9);
}
#content {
    background: #EDEFF4;
}
.hover {
    background: rgba(0, 0, 0, .3);
}

JavaScript

$(function () {
    $(".table01 td").on("click", function () {
        var $rows = $('.content01');
        if ($(".content01:first").is(":hidden")) {
            $("#header01").text("▲ Customer Details");
            $(".content01:first").slideDown();
        } else {
            $("#header01").text("▼ Customer Details");
            $(".content01:first").slideUp();
        }
    });
});