flex-box

flex-box -tab -Demo

by mubarakpasha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
	<body class="flex flex-v">
		<header role="header">
			<div class="wrap">
				<h1 class="site-title">Flexbox Tabs</h1>
			</div>
		</header>
		<div class="flex flex-change-1">
			<nav role="navigation" class="tabbed-nav">
				<div class="wrap">
					<ul class="flex flex-change-2">
						<li class="flex-1"><a href="#tab1">Tab 1</a></li>
						<li class="flex-1"><a href="#tab2">Tab 2</a></li>
						<li class="flex-1"><a href="#tab3">Tab 3</a></li>       
					</ul>                  
				</div>       
			</nav>
			<div role="main" class="tabs flex-1">
				<div id="tab1" class="wrap tabbed-container">          
					<div class="flex flex-change-1 flex-sm-col-reverse">
						<section class="flex-1">
							<h2>Heading 1</h2>
							<p>This is some paragraph text for a tabbed container. This is another sentence in this paragraph. Welp, this is the third sentence with <a href="">a link</a> thrown in. Here we have some <strong>bold text</strong> and well need <em>some emphasis</em> at some point as well.</p>
							<img src="http://placehold.it/675x350">
						</section>
						<section class="flex-1">
							<h2>Heading 2</h2>
							<p>This is some paragraph text for a tabbed container. This is another sentence in this paragraph. Welp, this is the third sentence with <a href="">a link</a> thrown in. Here we have some <strong>bold text</strong> and well need <em>some emphasis</em> at some point as well.</p>
							<img src="http://placehold.it/675x350">
						</section>
						<section class="flex-1">
							<h2>Heading 3</h2>
							<p>This is some paragraph text for a tabbed container. This is another sentence in this paragraph. Welp, this is the third sentence with <a href="">a link</a> thrown in. Here we have some <strong>bold text</strong> and well need <em>some emphasis</em> at some point as well.</p>
							<img...

CSS

* {margin: 0;padding: 0;}
body {font-family: "Minion Pro", georgia, serif;}
h1 {display: block; text-align: center;}
h1,h2,h3,h4 {font-family: "Myriad Pro", clean, sans-serif;}
strong {font-weight: 900;}
em {font-style: italic;}
h2 {color: #ff5b52;}
p {font-size: 18px; margin-bottom:20px;}
img {max-width:100%; height:auto;}
.wrap {margin: 0 auto;}
.flex {
  display: -webkit-box;   /* OLD: Safari, iOS, Android browser */
  display: -moz-box;      /* OLD: Firefox (buggy) */ 
  display: -ms-flexbox;   /* MID: IE 10 */
  display: -webkit-flex;  /* NEW, Chrome 21+ */
  display: flex;          /* NEW: Opera 12.1, Firefox 22+ */
}
.flex-1 {
  -webkit-box-flex: 1 auto;
  box-flex: 1 auto;
  -webkit-flex: 1 auto;
  -moz-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  padding: 30px 0 0 30px;  
}
.flex-change-1,
.flex-v {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-change-2 {
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;    
}
.flex-center-axis {
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.flex-sm-col-reverse {
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -ms-box-direction: reverse;
  box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
[role="header"],
[role="main"],
[role="navigation"],
[role="complimentary"],
[role="site-info"] {
  padding: 20px 7%;
}
[role="main"] {
  padding: 0 7% 20px;
}
[role="site-info"] {
  background: #eee;
}
[role="header"] {
  background: #ff5b52;
  height:...

JavaScript

var Tabs = {};

Tabs.tabbedContainer = function(selector, containers, nav) {
  $(selector+' #tab1').addClass('tabbed-container-active');
  $(nav+' li:first-child a').addClass('nav-active');
	$(nav+' li a').click(function(e) {
		e.preventDefault();
		$(nav+' li a').removeClass('nav-active');
		$(this).addClass('nav-active');
		$(containers).removeClass('tabbed-container-active');		
		var $href = $(this).attr('href');
		$($href).addClass('tabbed-container-active');

	});
};

jQuery(document).ready(function($) {
	Tabs.tabbedContainer('.tabs', '.tabbed-container', '.tabbed-nav');
});