Expand, Collapse Details Item Pada Table Dengan Bootstrap Dan jQuery

Dalam pembuatan suatu aplikasi terkadang kita harus membuat sebuh tabel yang memiliki tampilan / desain yang beragam, salah satunya membuat tabel yang jika kita klik barisnya akan muncul detil dari baris tersebut seperti gambar berikut,

Untuk membuat table seperti gambar diatas cukup mudah ikuti langkah seperti berikut,

1. Buat kode HTML nya

<h2>
Daftar Tim Sepak Bola Tiap Negara
</h2>
<br />
<div class="table-responsive">
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Negara</th>
                <th>Jumlah Tim</th>
                <th>Benua</th>
                <th>Status</th>
                <th>Jumlah Liga</th>
            </tr>
        </thead>
        <tbody>
                <tr class="clickable warning dropdown-deliverable" data-for="#details_1">
                    <td>Indonesia</td>
                    <td>40</td>
                    <td>Asia</td>
                    <td><span class="label label-info">Aktif</span></td>
                    <td>
                        2
                    </td>
                </tr>
                <tr style="padding:0">
                    <td style="padding:0"></td>
                    <td colspan=2 style="padding:0px;">
                        <div class="deliverable-infos" id="details_1">
                            <table class="table table-condensed table-user-content" id="hidden_table_1">
                                <tbody>
                                    <tr>
                                        <td>Persib</td>
                                        <td>Bandung</td>
                                    </tr>
                                    <tr>
                                        <td>Persebaya</td>
                                        <td>Surabaya</td>
                                    </tr>
                                    <tr>
                                        <td>Persipura</td>
                                        <td>Jayapura</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    <td style="padding:0"></td>
                    <td style="padding:0"></td>
                </tr>
                <tr class="clickable warning dropdown-deliverable" data-for="#details_2">
                    <td>Inggris</td>
                    <td>50</td>
                    <td>Eropa</td>
                    <td><span class="label label-info">Aktif</span></td>
                    <td>
                        4
                    </td>
                </tr>
                <tr style="padding:0">
                    <td style="padding:0"></td>
                    <td colspan=2 style="padding:0">
                        <div class="deliverable-infos" id="details_2">
                            <table class="table table-condensed table-user-content" id="hidden_table_2">
                                <tbody>
                                    <tr>
                                        <td>Manchester United</td>
                                        <td>Manchester</td>
                                    </tr>
                                    <tr>
                                        <td>Arsenal</td>
                                        <td>London</td>
                                    </tr>
                                    <tr>
                                        <td>Liverpol</td>
                                        <td>Merseyside</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    <td style="padding:0"></td>
                    <td style="padding:0"></td>
                </tr>
        </tbody>
    </table>
</div>

2. Sertakan style / CSS nya

.clickable {
    cursor: pointer;
}

.right-col {
    text-align: center;
}

3. Tuliskan script jQuery nya

$(document).ready(function() {
    $('.deliverable-infos').hide();
    $('.dropdown-deliverable').on('click', function(e) {
        console.log("dropdown toggled!");
        e.preventDefault();
        e.stopPropagation();
        //get targeted element via data-for attribute
        var dataFor = $(this).data('for');
        var idFor = $(dataFor);
        idFor.slideToggle();
    });
});

4. Jangan lupa sertakan library jquery.js, bootstrap.js dan bootstrap.css nya

//Style bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

//Script bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

//Script jQuery
https://code.jquery.com/jquery-1.10.2.min.js

Demikian proses pembuatan table yang memiliki detil di setiap barisnya. Untuk lebih jelas bisa melihat contoh di link Berikut

Semoga bermanfaat..