JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<div class="ui-widget-header collapseTable" id="favoritesContainer">
    <div class="trigger" id="favoritesHeader">
        <div class="toggle"></div>Favorite Tracks</div>
    <div style="min-height: 85px; height: 200px; display: block;" id="favoritesStageContainer" class="ui-resizable">
        <div class="resizable" id="favoritesStage" style="width: 100%; overflow: auto; height: 100%;">
            <div id="favoritesStageHeader">
                <div style="font-size: 1.2em; display: none;" class="marg10Left marg10Top" id="favoritesNoData">None of your favorites are currently running.</div>
                <div style="font-size: 1.2em; display: none;" class="marg10Left marg10Top" id="favoritesMissingData">No favorites are selected.</div>
            </div>
            <div style="overflow:hidden;height:auto;" id="favoritesTableContainer">
                <div class="favBox"><a style="text-decoration:none;width:68px;" data-race="1" data-track="FRE" class="favNav floatLeft">Freehold Raceway</a>
                    <div data-track="FRE" class="btnVideo favVideo"></div>
                    <div class="favInfoBox"><a style="text-decoration:none;" data-race="1" data-track="FRE" class="favNav "><div class="favInfo">1<br><font style="font-size:0.6em;">Race</font></div><div style="float:right;color:red;" class="favInfo">0<br><font style="font-size:0.6em;color:#fff;">MTP</font></div></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;">==&nbsp;==</div>
    </div>
    <div class="clearBoth"></div>
</div>

CSS

body {
    font-size: 67%;
}
/*-------------------Favorites Display on Program Page ------------------*/
 #favoritesContainer {
    background: #aaa;
    color: #000;
    padding: 3px;
    border: 0;
    margin-top: 0;
}
#favoritesHeader {
    font-size: 1.5em;
    font-weight: bold;
    color: #0281AF;
    margin: 0 auto;
    min-height: 15px;
    border: 1px solid #67686A;
}
#favoritesStageContainer {
    border: 1px solid #67686A;
    border-top: 0;
    display: none;
    overflow:hidden;
    padding-bottom: 16px;
    height:85px;
}
#favoritesStage {
    padding: 5px 0px 5px 0px;
    background: #fff;
    overflow: auto;
    width: 704px;
}
#favoritesStageContainer .ui-resizable-s {
    cursor: row-resize !important;
    bottom: -1px !important;
    font-size: 1em;
    color: #fff;
    height: 10px;
    background-color: #67686A;
    letter-spacing: -1px;
    text-align: center;
}
#favoritesStageHeader {
    position: absolute;
    z-index: 100;
    top: 0;
    background-color: #fff;
    width: 696px;
}
#favoritesSelectHeader div {
    vertical-align: top;
    float: left;
    margin-top: 5px;
}
#favoritesSelectHeader {
    margin-top: 0 !important;
    font-weight: normal;
}
#favoritesStageHeader select {
    vertical-align: text-bottom;
    float: left;
    margin-left: 4px;
}
.favBox {
    height: 74px;
    width: 87px;
    border: 1px solid #000;
    float: left;
    margin-left:5px;
    margin-bottom: 10px;
    border-radius: 5px;
    moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color:#000;
    padding: 3px 3px 2px 3px;
    color: #fff !important;
    font-size: 1.2em;
    position:relative;
}
.favNoRaces {
    height: 23px;
    width: 60px;
    border: 1px solid #000;
    margin: 0px 11px 5px 11px;
    border-radius: 5px;
    moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color:#444;
    padding: 3px;
    color: #fff;
    font-size: 0.9em;
    font-weight: normal;
    text-align: center;
   ...

JavaScript

$('#favoritesHeader').click(function () {
    $('#favoritesStage').parent().slideToggle(1000, function () {
    });
});