JSFiddle - React, Tailwind, and code Playground

Left Nav 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 class="icon-bar"></span>
	<span class="icon-bar"></span>

            ...

CSS

.nav-tabs.nav-tabs-left {
  float: left;
  border-right: 0;
}
.nav-tabs.nav-tabs-left li a {
  margin-right: -1px;
  border-right: none;
}
.nav-tabs.nav-tabs-right {
  float: right;
  border-left: 0;
}
.nav-tabs.nav-tabs-right li a {
  margin-left: -1px;
  border-left: none;
  text-align: right;
}
.nav-tabs.nav-centered li a {
  text-align: center;
}
.nav-tabs.nav-tabs-left,
.nav-tabs.nav-tabs-right {
  border-bottom: 0;
  max-width: 33%;
}
.nav-tabs.nav-tabs-left li,
.nav-tabs.nav-tabs-right li {
  float: none;
  margin: 0;
}
.nav-tabs.nav-tabs-left li a,
.nav-tabs.nav-tabs-right li a {
  border: 1px solid transparent;
  background-color: transparent;
  color: #666;
}
.nav-tabs.nav-tabs-left li a:hover,
.nav-tabs.nav-tabs-right li a:hover {
  background-color: transparent;
  border-color: transparent;
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active .glyphicon,
.nav-tabs.nav-tabs-right li.active .glyphicon {
  color: #333;
}
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active .glyphicon:hover,
.nav-tabs.nav-tabs-right li.active .glyphicon:hover {
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active a:focus,
.nav-tabs.nav-tabs-right li.active a:focus {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
}
.nav-tabs.nav-tabs-left li:not(:last-of-type),
.nav-tabs.nav-tabs-right li:not(:last-of-type) {
  margin-bottom: -1px;
}
.tab-content.side-tabs .tab-pane {
  display: none;
  padding: 1.0rem;
  overflow-y: auto;
  border: 1px solid transparent;
}
.tab-content.side-tabs-left {
  margin-left: 45px;
}
.tab-content.side-tabs-left .tab-pane {

}
.tab-content.side-tabs-left .tab-pane.active {
  display: block;
  background-color: #f0f0f0;
  border-color: #f0f0f0;
 ...

JavaScript

(function () {
	'use strict';

	var sideTabsPaneHeight = function() {
		var navHeight = $('.nav-tabs.nav-tabs-left').outerHeight() || $('.nav-tabs.nav-tabs-right').outerHeight() || 0;

		var paneHeight = 0;

		$('.tab-content.side-tabs .tab-pane').each(function(idx) {
			paneHeight = $(this).outerHeight() > paneHeight ? $(this).outerHeight() : paneHeight;
		});

		$('.tab-content.side-tabs .tab-pane').each(function(idx) {
			$(this).css('min-height', navHeight + 'px');
		});
	};
	
  $(function() {
    sideTabsPaneHeight();

		$( window ).resize(function() {
			sideTabsPaneHeight();
		});

		$( '.nav-tabs.nav-tabs-left' ).resize(function() {
			sideTabsPaneHeight();
		});
	});
}());