JSFiddle - React, Tailwind, and code Playground

by azhari

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<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>
                               ...

CSS

.clickable {
    cursor: pointer;
}

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

JavaScript

$(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();
    }); 
});