JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Cuprum:400,700&amp;subset=latin,cyrillic-ext"></script>
<div class="tabs">
    <ul>
        <li><a href="#tab_first">тренажерный зал</a>

        </li>
        <li><a href="#tab_second">наши тренера</a>
        </li>
    </ul>
    <div id="tab_first"><p>in Site Templates \ Creative \ Portfolio Columns: 2, Compatible Browsers: IE9, IE10, Firefox, Safari, Opera, Chrome, Compatible With: Bootstrap 2.3.x, Bootstrap 2.2.2, Bootstrap 2.2.1, Bootstrap 2.1.1, Bootstrap 2.1.0, Bootstrap 2.0.4, Bootstrap 2.0.3, Bootstrap 2.0.2, Bootstrap 2.0.1, Bootstrap</p></div>
    <div id="tab_second"><p>Bootstrap 2.2.2, Bootstrap 2.2.2, Bootstrap 2.2.2, Bootstrap 2.2.2, Bootstrap 2.2.2, Bootstrap 2.2.2,</p></div>
</div>

CSS

* {
    padding:0;
    margin:0;
    outline:none;
}
body {
    color:#333;
    font-family:'Cuprum', sans-serif;
    font-size:62.5%;
}
a {
    text-decoration:none;
}
.tabs {
    font-size:140%;
    width:400px;
}
.tabs ul {
    list-style:none;
    zoom:1;
}
.tabs ul li {
    cursor:pointer;
}
.tabs ul li a {
    color:white!Important;
    float:left;
    margin-right:1px;
    padding:8px 5px;
    background:#333;
    color:white;
    border-bottom:1px solid #fff;
}
.active {
    background:#a6ce2c!Important;
    border-bottom:1px solid #a6ce2c!Important;
}
.tabs div {
    display:none;
    background:#a6ce2c;
    padding:5px;
    clear:both;
}

JavaScript

var allTabs = $('div.tabs > div');
allTabs.hide().filter(':first').show();

$('div.tabs ul li a').click(function () {
    $('div.tabs ul li a').removeClass('active');   
    allTabs.hide().filter(this.hash).slideDown(400);
    $(this).addClass('active');
}).filter(':first').click();