JSFiddle - React, Tailwind, and code Playground

HTML

<table id="report">
    <tr>
        <th>Country</th>
        <th>Population</th>
        <th>Area</th>
        <th>Official languages</th>
        <th></th>
    </tr>
    <tr>
        <td>United States of America</td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td>show/hide</td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
             <h4>Additional information</h4>

            <ul>
                <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a>
                </li>
                <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a>
                </li>
                <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>United Kingdom</td>
        <td>61,612,300</td>
        <td>244,820 km2</td>
        <td>English</td>
        <td>show/hide</td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
             <h4>Additional information</h4>

            <ul>
                <li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a>
                </li>
                <li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a>
                </li>
                <li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official 
                        Yearbook of the United Kingdom</a>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>India</td>
        <td>1,147,995,904</td>
        <td>3,287,240‡ km2</td>
        <td>Hindi, English</td>
        <td>show/hide</td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
      ...

CSS

#report {
    border-collapse:collapse;
}
#report h4 {
    margin:0px;
    padding:0px;
}
#report img {
    float:right;
}
#report ul {
    margin:10px 0 10px 40px;
    padding:0px;
}
#report th {
    background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left;
    color:#fff;
    padding:7px 15px;
    text-align:left;
}
#report td {
    background:#C7DDEE none repeat-x scroll center left;
    color:#000;
    padding:7px 15px;
}
#report tr.odd td {
    background:#52edc7;
    cursor:pointer;
}
#report div.arrow {
    background:transparent url(arrows.png) no-repeat scroll 0px -16px;
    width:16px;
    height:16px;
    display:block;
}
#report div.up {
    background-position:0px 0px;
}

JavaScript

$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();

$("#report tr.odd").click(function () {
    var trToToggle = $(this).next("tr");
    $("#report tr:not(.odd)").not(trToToggle).hide();
    $(trToToggle).toggle();
    $(this).find(".arrow").toggleClass("up");
});