JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="page-header">
        <h1>Bootstrap Vertical Tabs <small> | Demo</small></h1>
    </div>

    <div class="row" style="min-height:600px;">
        <div  class="col-sm-12 multi-tabs">
            <h3>Left Tabs</h3>
            <hr/>
            <div class="col-xs-3"> <!-- required for floating -->
                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-left level-1">
                    <li class="active lev-cont-1"><a href="#home" data-toggle="tab">Home</a>
                        <ul class="nav nav-tabs tabs-left level-2">
                            <li class="active lev-cont-2"><a href="#home1" data-toggle="tab">Home1</a></li>
                            <li class="lev-cont-2"><a href="#profile1" data-toggle="tab">Profile1</a></li>
                            <li class="lev-cont-2"><a href="#messages1" data-toggle="tab">Messages1</a></li>
                            <li class="lev-cont-2"><a href="#settings1" data-toggle="tab">Settings1</a></li>
                        </ul>
                    </li>
                    <li class="lev-cont-1"><a href="#profile" data-toggle="tab">Profile</a>
                        <ul class="nav nav-tabs tabs-left level-2">
                            <li class="lev-cont-2"><a href="#home2" data-toggle="tab">Home2</a></li>
                            <li class="lev-cont-2"><a href="#profile2" data-toggle="tab">Profile2</a></li>
                            <li class="lev-cont-2"><a href="#messages2" data-toggle="tab">Messages2</a></li>
                            <li class="lev-cont-2"><a href="#settings2" data-toggle="tab">Settings2</a></li>
                        </ul>
                    </li>
                    <li class="lev-cont-1"><a href="#messages"...

CSS

/*!
 * bootstrap-vertical-tabs - v1.2.1
 * https://dbtek.github.io/bootstrap-vertical-tabs
 * 2014-11-07
 * Copyright (c) 2014 Ä°smail Demirbilek
 * License: MIT
 */

a {
   outline: 0!important;
}
.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}
.sideways {
  margin-top:50px;
  border: none;
  position: relative;
}
.sideways>li {
  height: 20px;
  width: 120px;
  margin-bottom: 100px;
}
.sideways>li>a {
  border-bottom: 1px solid #ddd;
  border-right-color: transparent;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
}
.sideways>li.active>a,
.sideways>li.active>a:hover,
.sideways>li.active>a:focus {
  border-bottom-color: transparent;
  border-right-color: #ddd;
  border-left-color: #ddd;
}
.sideways.tabs-left {
  left: -50px;
}
.sideways.tabs-right {
  right: -50px;
}
.sideways.tabs-right>li {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sideways.tabs-left>li {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.level-2{display:none;}
.lev-cont-1 {
    border-bottom: 1px solid...

JavaScript

function liActiv(){
    $('li.lev-cont-1').each(function(i){
        if($(this).hasClass('active')){
            $(this).children('ul.level-2').slideDown('2000');
            $("li.lev-cont-1").not(this).children('ul.level-2').slideUp('2000');
        }
    });
}
liActiv();

$('.lev-cont-1').click(function(){
    setTimeout(function() {
	          liActiv();
	}, 10);

});