JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <table>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
        </table>            
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <table>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
        </table>      </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
                <table>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
        </table>  
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
                <table>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
                        <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
        </table>  
    </div>
</div>

CSS

#accordion{
 width: 250px;   
}

table {
 width: 100%;       
}

tr:hover {
 background-color: #2CA0D1;   
}

JavaScript

$(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            fillSpace: true
        });
        
        
        
        
    });