JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div class="WidgetControl">
    <script type="text/javascript" src="/Scripts/SearchWidget.js"></script>
    <ul class="WidgetTab tabs">
        <li class="search-box"><span href="/search/SearchBox">Search</span> </li>
        <li class="directory-list  active"><span href="/funddirectory/DirectoryList" class="active">
            Fund Directory</span> </li>
    </ul>
    <div class="tab_container" id="WidgetTab">
        <form method="get" action="/search/QuickSearch">
        <div class="search-box ActionControl" id="Div1" style="display: none;">
            <input type="text" watermarktext="Please enter a search term" value="" name="Search"
                id="Search" class="watermarkOn">
            <input type="submit" value="Search" id="Submit1" class="button-medium">
        </div>
        </form>
        <div class="directory-list" id="DirectoryList">
            <span>Fund Directory</span> <span><a href="/funddirectory/DirectoryResult/a">A</a>
            </span><span><a href="/funddirectory/DirectoryResult/b">B</a> </span><span><a href="/funddirectory/DirectoryResult/c">
                C</a> </span>
        </div>
    </div>
    <input type="hidden" value="" name="Search" id="Search">
</div>

CSS

#SearchBox.search-box
{
    padding: 10px 25px;
    
    background-color: #F6E9D8;
    border: 1px solid #E7DFD0;
    
    margin-bottom: 6px;
    
    height: 20px;
    
}

#SearchBox.search-box input[type=text]
{
    width: 440px;
}

#SearchForm .search-box a
{
    background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    color: #FFF;
    cursor: pointer;
    
    display: -moz-inline-box;
    display: inline-block;
    
    font-size:8pt;
    
    padding-left: 24px;
    padding-right:28px;
    padding-top: 6px;
    padding-bottom: 5px;
    
}


#WidgetTab
{
    margin-bottom: 6px;
}


ul.tabs
{
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 22px; /*--Set height of tabs--*/
    /*border-bottom: 2px solid #a7a59b;*/
    border-bottom: 2px solid #96938A;
    
    /*border-left: 1px solid #999;*/
    width: 100%;
    color: #4781aa;
}
ul.tabs li
{
    float: left;
    margin: 0;
    padding: 0;
    height: 21px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 21px; /*--Vertically aligns the text within the tab--*/
    /*border: 2px solid #a7a59b;*/
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #E1D4C3;
    
    margin-right: 3px;
    /*width: 20%;*/
}
ul.tabs li a
{
    text-decoration: none;
    display: block;
    font-size: 1.2em;
    /*padding: 0 20px;*/
    padding: 0 10px;
    border: 1px solid #E9DECF; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
    
    /*text-align: center;*/
}

ul.tabs li a:active 
{
    background: #96938A;
    color: #fff;
}

ul.tabs li a:hover , ul.tabs li:hover
{
    background: #96938A;
    color: #fff;
    border-bottom: 1px solid #96938A;
}

.TabControl span, .WidgetTab span
{
    cursor: pointer;
    padding: 0 10px;
    font-size: 1.2em;    
}

html ul.tabs...

JavaScript

$('.WidgetTab a, .WidgetTab span').live('click', function () {

        //var data = GatherFormData($(this).parents('form:first'));

        var currentTab = $(this).parents('li:first');
        var currentContent = $('.tab_container .' + currentTab.attr('class'));

        $('.WidgetTab li').removeClass("active");
        currentTab.addClass("active");
        var url = $(this).attr("href");
        $('.tab_container div:visible').fadeOut(100, function () {
            if (currentContent.length == 0) {
                $.get(url, data, function (result) {
                    $('#WidgetTab').append(result).fadeIn(100);
                }, 'html');
            }
            else {
                currentContent.fadeIn(100);
            }
        });


        return false;
    });