JSFiddle - React, Tailwind, and code Playground

by Beengie

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://www.google.com/jsapi"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table id="tblSummary" class="table table-condensed">
    <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
        <th>Fourth</th>
        <th></th>
    </tr>
    <tr id="Row1" class="top">
        <td>R1, C1</td>
        <td>R1, C2</td>
        <td>R1, C3</td>
        <td>R1, C4</td>
        <th></th>
    </tr>
    <tr id="Row2" class="parent top">
        <td>R2, C1</td>
        <td>R2, C2</td>
        <td>R2, C3</td>
        <td>R2, C4</td>
        <td><i id="ddn-4857" class="fa fa-caret-down" onmouseover="this.style.cursor='pointer'"></i></td>
    </tr>
    <tr id="Row2Child1">
        <td></td>
        <td colsapn="3"><h1>I'm here!</h1></td>
        <td></td>
    </tr>
    <tr id="Row3" class="top">
        <td>R3, C1</td>
        <td>R3, C2</td>
        <td>R3, C3</td>
        <td>R3, C4</td>
        <td></td>
    </tr>
    <tr id="Row4" class="parent top">
        <td>R4, C1</td>
        <td>R4, C2</td>
        <td>R4, C3</td>
        <td>R4, C4</td>
        <td><i id="ddn-3417" class="fa fa-caret-down" onmouseover="this.style.cursor='pointer'"></i></td>
    </tr>
    <tr id="Row4Child1">
        <td></td>
        <td colsapn="3"><h1>I'm here!</h1></td>
        <td></td>
    </tr>
    <tr id="Row5" class="top">
        <td>R5, C1</td>
        <td>R5, C2</td>
        <td>R5, C3</td>
        <td>R5, C4</td>
        <td></td>
    </tr>
</table>
<br />

<div class="click"><h1>List 2</h1></div>
<div class="information"><h1>Info 2</h1></div>

CSS

.information {
    display:none; 
}

JavaScript

$("#tblSummary tr:not(.top)").hide();
//$("#tblSummary tr:first-child").show(); 
$("#tblSummary tr.parent td i[id^=ddn-]").click(function () {
    //$(this).next("tr").toggle(125);
    var idOfParent = $(this).parents('tr');
    //alert(idOfParent);
    $(idOfParent).next('tr').slideToggle("slow");
    
    $(this).toggleClass("on");
    if ($(this).hasClass("fa-caret-down")) {
        $(this).removeClass("fa-caret-down");
        $(this).addClass("fa-caret-up");
    } else {
        $(this).removeClass("fa-caret-up");
        $(this).addClass("fa-caret-down");
    }
});

$('.click').click(function() {
    $(this).next('.information').slideToggle('slow');
});