Foundation/Horizontal Tabs (Flex)

foundation-horizontal-tabs-flex.markdown

Foundation/Horizontal Tabs (Flex)

A Pen by Ian Kirkland on CodePen.

License.

index.html

<!-- This demo uses flex grid but you can use float grid too -->
<section class="container">

  <div class="row">
    <div class="columns">
      <h2>Horizontal Tabs</h2>
      <p>There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class <code>.tabs</code>, and each item has the class <code>.tabs-title</code>. Each tab contains a link to a tab. The <code>href</code> of each link should match the ID of a tab.</p>
      <p>The tab content container has the class <code>.tabs-content</code>, while each section has the class <code>.tabs-panel</code>. Each content pane also has a unique ID, which is targeted by a link in the tabstrip.</p>
      <p>Put it all together, and we get this:</p>
    </div>
  </div>

  <div class="row">
    <div class="columns">
      <ul class="tabs" data-tabs id="example-tabs">
        <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
        <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
        <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
        <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
      </ul>

      <div class="tabs-content" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1">
          <p>One</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel2">
          <p>Two</p>
          <img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-7.jpg">
        </div>
        <div class="tabs-panel" id="panel3">
          <p>Three</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel4">
          <p>Four</p>
          <img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-2.jpg">
        </div>
        <div class="tabs-panel" id="panel5">
          <p>Five</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel6">
          <p>Six</p>
          <img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-8.jpg">
        </div>
      </div>
    </div>
  </div>

</section>

script.js

$(document).foundation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://codepen.io/ZURBFoundation/pen/jmYLwq"></script>

style.css

/** 
 * Demo Styles 
 */
* { 
  color: #444444; 
}

body {
  padding: 2rem 1rem;
}

.container {
  width: 80%;
  margin: auto;
  margin-top: 2em;
}

.row {
  margin-bottom: 2em;
}

.row.small-up-12 {
  margin-bottom: 0;
}

.column {
  margin-bottom: .5em;
}

/* Hides Foundation Docs Callout */
[href*="https://foundation.zurb.com/sites.html"] {
	visibility: hidden !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 0px !important;
	height: 0px !important;
	display: none !important;
}

styles

<link href="https://codepen.io/ZURBFoundation/pen/jmYLwq" rel="stylesheet" />