JSFiddle - React, Tailwind, and code Playground

HTML

<div id="unit_details">
    <div class="information_box" id="lecture">
        <table>
            <thead>
                <tr>
                    <th colspan="2">LECTURE</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>LECTURER</strong></td>
                    <td>John Gerrand <a href="#">93%</a></td>
                </tr>
                <tr>
                    <td><strong>WHEN</strong></td>
                    <td>1-2pm Tuesday</td>
                </tr>
                <tr>
                    <td></td>
                    <td>3-4pm Thursday</td>
                </tr>
                <tr>
                    <td><strong>WHERE</strong></td>
                    <td>STH 1, BLD 64 <a href="#">Map</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="information_box" id="tutorial">
        <table>
            <thead>
                <tr>
                    <th colspan="2">TUTORIAL</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>TUTOR</strong></td>
                    <td>Raj Varan <a href="#">88%</a></td>
                </tr>
                <tr>
                    <td><strong>WHEN</strong></td>
                    <td>8-9am Wednesday</td>
                </tr>
                <tr>
                    <td><strong>WHERE</strong></td>
                    <td>W364, Bld 11</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="information_box" id="rating">
        <table>
            <thead>
                <tr>
                    <th colspan="2">RATING <a href="#">89%</a> <span><a href="#" class="hide_unit_details">Hide</a></span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>EASE</strong></td>
                    <td class="rating_num">4.3</td>
               ...

CSS

html, body, div, 
h1, h2, h3, h4, h5, h6
{
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
padding: 0;
margin: 0;
border: 0;
vertical-align: baseline;
text-align: left;
textarea {resize: none};
color: #616262;
}

body
{
    /* background: #56a7a7 url(/assets/images/bg_uc_pat.jpg) repeat-x fixed; */
    font: 12px/1.7em Verdana, Verdana, Geneva, sans-serif;
}

#wrapper
{
    width: 100%;
}

/* --------------------------------------------------------------
   Top
-------------------------------------------------------------- */
#top,
#topcasing
{
    /*background: #000000;*/
    background-color: #00846e;
    color: #fff;
    margin: 0;
    width: 1230px;
    height: 40px;
    margin: 0 auto;
}

#topcasing
{
    width: 100%;
}

#top ul
{
    margin: 0;
    height: 40px;
}

#top .left ul
{
    margin-left: 17px;
}

#top ul.right
{
    float: right;
}

#top ul li
{
    float: left;
    list-style-type: none;
    height: 40px;
    margin: 0;
    line-height: 36px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#top b
{
    color: #fff;
}

#top a
{
    /*color: #fff;*/
    color: #004b84;
    text-decoration: none;
}

#top a:hover
{
    text-decoration: underline;
}

#top .left, #top .center
{
    float: left;
}

#global-search
{
    margin-left: 119px;
    height: 21px;
    width: 411px;
    margin-top: 8px;
    background: #fff url(/assets/images/search-icon.png) no-repeat 405px 3px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    color: #4b4b4b;
    outline: none;
}

#top ul a
{
    /*color: #fff;*/
    color: #004b84;
    font-weight: bold;
}

$top ul li
{
    margin: 0px;
}

#top ul a:hover
{
    text-decoration: none;
}

.top_name
{
    padding-right: 30px;
}

.top_link
{
    cursor: pointer;
}

.top_loader
{
    padding: 12px;
}

.over
{
    background-color: #fff;
}

.over .anot
{
    color:...

JavaScript

jQuery(function($) {

    var udeets = $('#unit_details');
    var init_height = udeets.find('.information_box').height();
    
    console.log( init_height );

    $('.hide_unit_details').toggle(function() {
        udeets.css('overflow', 'hidden');
        udeets.animate({
            height: 20
        }, "fast");
    }, function() {
        udeets.animate({
            height: init_height
        }, "fast");
    });
});