JSFiddle - React, Tailwind, and code Playground

Tabs for Reside Reports Page

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://jenperrin.com/dev/reside/css/styles.css">
<link rel="stylesheet" href="http://jenperrin.com/dev/reside/css/riside.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<div class="resideGrid-1200">
    <div class="onerow">
        <div class="col12">
            <div class="content">

                <div id="tabs_wrapper">
                    <div id="tabs_container">
                        <ul id="tabs">
                            <li class="active"><a href="#tab1">Tab 1</a>
                            </li>
                            <li><a href="#tab2"><i class="icon-chevron-right"></i> Tab with icon</a>
                            </li>
                            <li><a href="#tab3">Long name for the last tab</a>
                            </li>
                        </ul>
                    </div>
                    <div id="tabs_content_container">
                        <div id="tab1" class="tab_content" style="display: block;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
                        </div>
                        <div id="tab2" class="tab_content">
                            <p>This tab has icon in it.</p>
                        </div>
                        <div id="tab3" class="tab_content">
                            <p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);
body { margin-top: 20px; }

#tabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font-size: 15px;
}
#tabs li {
    display: inline;
}
#tabs li a {
    border: 1px solid #dcdcdc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    font-weight: bold;
    font-size: 13px;
}
#tabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#tabs li.active a {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#tabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#tabs_content_container {
    padding: 10px;
    border-top: 1px solid #ccc;
}
.tab_content {
    display: none;
}

JavaScript

$(document).ready(function () {
    $("#tabs li").click(function () {
        //	First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //	Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //	Hide all tab content
        $(".tab_content").hide();

        //	Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //	Show the selected tab content
        $(selected_tab).fadeIn();

        //	At the end, we add return false so that the click on the link is not executed
        return false;
    });
});