JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<div class="EMCalculationContainer">
    <div class="header">View Details
    </div>
    <div class="contentCalculation">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>



Your selection:<br> Result:<div class="EMCalculationContainer"><div class="header">View Details</div><div class="contentCalculation"><table style="width:100%;font-family: Tahoma;font-size: 12px;font-weight: normal;border-collapse: collapse;"><tbody><tr style="border:2px solid #65a0da;background-color: #65a0da;color: #ffffff;"><td><b>SerialNumber</b></td><td><b>Year</b></td><td><b>Make</b></td><td><b>Model</b></td><td><b>SalesPrice</b></td><td><b>SaleDate</b></td><td><b>Location</b></td><td><b>AuctionCompany</b></td><td><b>Mileage</b></td><td><b>Condition</b></td><td><b>Hours</b></td><td><b>PumpMeters</b></td><td><b>Notes</b></td></tr><tr style="border:2px solid #65a0da;"><td style="border:2px solid #65a0da;">70183</td><td style="border:2px solid #65a0da;">2007</td><td style="border:2px solid #65a0da;">VOLVO</td><td style="border:2px solid #65a0da;">A40D</td><td style="border:2px solid #65a0da;">230000.0000</td><td style="border:2px solid #65a0da;">11/7/2008 12:00:00 AM</td><td style="border:2px solid #65a0da;">LAS VEGAS, NV</td><td style="border:2px solid #65a0da;">RITCHIE BROS. AUCTIONEERS INTL</td><td style="border:2px solid #65a0da;"></td><td style="border:2px solid #65a0da;"></td><td style="border:2px solid #65a0da;">2650</td><td style="border:2px solid #65a0da;"></td><td style="border:2px solid #65a0da;">6X6, ARTIC DUMP, CAB W/AIR, 29.5R25 TIRES, 2650 HRS. </td></tr><tr style="border:2px solid #65a0da;"><td style="border:2px solid #65a0da;">70105</td><td style="border:2px solid #65a0da;">2006</td><td style="border:2px solid #65a0da;">VOLVO</td><td style="border:2px solid...

CSS

.EMCalculationContainer {
    width:100%;
    border:1px solid #d3d3d3;
}
.EMCalculationContainer div {
    width:100%;
}
.EMCalculationContainer .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.EMCalculationContainer .contentCalculation {
    display: none;
    padding : 5px;
}

JavaScript

$(".header").click(function () {

    $header = $(this);
    
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.toggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Hide Details" : "View Details";//"Expand";
        });
    });

});