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...

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:...

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');
});