Sitepoint 905123

Collapsible table / basic accordion/expander

HTML

<div id="content">


        <div class="collapser">

            <h3>Table heading</h3>
            <div class="content">
                <table class="some-table">
                    <thead>
                        <tr>
                            <th>Index</th>
                            <th>Name</th>
                            <th>Location</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="index">1</td>
                            <td class="name">John Smith</td>
                            <td class="location">Sydney</td>
                        </tr>
                        <tr>
                            <td class="index">2</td>
                            <td class="name">Jane Doe</td>
                            <td class="location">London</td>
                        </tr>
                        <tr>
                            <td class="index">3</td>
                            <td class="name">Samuel L. Jackson</td>
                            <td class="location">Hollywood</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>

    </div>

CSS

body {
    padding:20px;
    font-family: sans-serif;
}

#content {
    width:600px;
    margin:0 auto;
}

.collapser h3 {
    position: relative;
    margin:10px 0;
    font-size:22px;
    font-weight: bold;
}

.collapser table {
    border-collapse: collapse;
}
.collapser th {
    text-align: left;
}
.collapser td {
    width:200px;
    border:1px solid #ccc;
    padding:3px 5px;
}
.collapser td.index {
    width:50px;
}
.collapser h3::before {
    content: " > ";
    font-size:20px;
    font-weight: bold;
    position: absolute;
    left:-20px;
    top:0px;
}

.collapser h3.active::before {
    content: " v ";
}

JavaScript

$(document).ready(function(){
    $(".collapser .content").hide();
    $(".collapser").on("click", "> h3", function(e) {
        var el = $(this);
        el.toggleClass("active");
        el.next(".content").slideToggle(400);
    });
});