JSFiddle - React, Tailwind, and code Playground

Responsive Tabs for Reside V.3

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/bootstrap.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/custom.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/styles.css">
<script src="http://jennperrin.com/edge/Reside-V3/js/bootstrap.min.js"></script>
<script src="http://jennperrin.com/edge/Reside-V3/js/custom.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container page_block noTopBorder noBotBorder">
    <div class="header-cont">
        <div class="row">
            <div class="col-md-8">
                <ul class="list-inline mt-0 mb-0">
                    <li><small><a href="../index.php">Home</a></small>
                    </li>
                    <li><small><a href="../available-properties.php">Properties</a></small>
                    </li>
                    <li><small><a href="../about-us.php">About Us</a></small>
                    </li>
                    <li><small><a href="../contact-us.php">Contact Us</a></small>
                    </li>
                    <li><small><a href="index.php?action=myProfile">My Profile</a></small>
                    </li>
                    <li><small><a data-toggle="modal" href="#signOut">Sign Out</a></small>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">	<small class="pull-right">June 03, 2015</small>
                
            </div>
        </div>
        <hr class="mt-10 mb-10" />
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">	<span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span...

CSS

.tabs { margin: 20px 0; }

.tabsBody {
    margin: 0; 
    padding: 0;
    zoom: 1;
}
    .tabsBody:after {
        clear: both;
        content: "";
        display: table;
    }

.tabsBody > li {
    margin: 0;
    display: inline;
}
    .tabsBody > li > .tabHeader {
        background: #f0f0f0;
        border: 1px solid #eeeeee;
        border-bottom: 0;
        color: #4a2300;
        display: inline-block;
        margin: 0;
        padding: 6px 10px;
        position: relative;
        vertical-align: bottom;
        *zoom: 1;
        *display: inline;
        *margin-right: 5px;
        font-size: 16px;
    }
        .tabsBody > li > .tabHeader:focus, .tabsBody > li > .tabHeader:hover {
            outline: 1px solid #ccc;
            background-color: #ffffff;
            color: #6b594b;
            cursor: pointer;
            *zoom: 1;
        }

.tabsBody > li > .tabContent {
    background: #fff;
    border: 1px solid #eeeeee;
    display: none;
    float: left;
    margin-top: -1px;
    padding: 10px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.tabsBody > li.active > .tabHeader {
    background: #fff;
    z-index: 2;
}
    .tabsBody > li.active > .tabContent { display: block !important; }

.no-js .tabsBody > li,
.no-js .tabsBody > li > .tabHeader, 
.no-js .tabsBody > li > .tabContent  {
    display: block;
}

@media screen and (max-width:640px) {
    .tabsBody > li,.tabsBody > li > .tabHeader, .tabsBody > li > .tabContent {
        float: none;
        margin: 0;
        width: auto;
    }
    .tabsBody > li, .tabsBody > li > .tabHeader { display: block; }
    .tabsBody {
        margin-right: 0;
        padding-right: 0;
    }
}

JavaScript

(function ($) {
    var d = document.documentElement; d.className = d.className.replace(/no\-js/g,'');  
    
    var ie = document.all && !window.opera;
    $.fn.tabs = function () {
        this.each(function () {
            var tabs = $(this);
            var tabsContents = tabs.find('> .tabsBody');
            var tabsItems = tabsContents.find('> li');

            tabsContents.on('click keyup', '> li > .tabHeader', function (e) {
                e.preventDefault();
                if(e.type=='keyup' && e.which!=13) return;
                var index = tabsItems.index($(this).parents('li:first'));
                changeTabs(index);
            });
            
            function changeTabs(index) {
                tabsItems.removeClass('active').delay(ie ? 1 : 0).eq(index).addClass('active');
            }
        });
        return this;
    };
})(jQuery);

$(document).ready(function() {
    $('div.tabs').tabs();
});