Foundation/Collapsing Tabs (Flex)

foundation-collapsing-tabs-flex.markdown

Foundation/Collapsing 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">

  <!--~~~ row ~~~-->
  <div class="row">
    <div class="columns">
      <h2>Collapsing Tabs</h2>
      <p>Add the attribute <code>data-active-collapse="true"</code> to a tabstrip to collapse active tabs.</p>      
    </div>
  </div>

  <!--~~~ row ~~~-->
  <div class="row">
    <div class="columns">
      
      <!-- BEGIN -->
      <section>
        <ul class="tabs" data-active-collapse="true" data-tabs id="collapsing-tabs">
          <li class="tabs-title is-active"><a href="#panel1c" aria-selected="true">Tab 1</a></li>
          <li class="tabs-title"><a href="#panel2c">Tab 2</a></li>
          <li class="tabs-title"><a href="#panel3c">Tab 3</a></li>
          <li class="tabs-title"><a href="#panel4c">Tab 4</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel is-active" id="panel1c">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel" id="panel2c">
          <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel" id="panel3c">
          <img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-3.jpg">
        </div>
        <div class="tabs-panel" id="panel4c">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      </section>
      <!-- END -->
      
    </div>
  </div>
  
  
  <!--~~~ row ~~~-->
  <div class="row">
    <div class="columns">

      <hr>
      <h4>Tabs and URLs - Browser history</h4>
      <p>When the <code>data-deep-link</code> option is set to <code>true</code>, the current state of the tabset is recorded by adding a hash with the tab panel ID to the browser URL when a tab opens. By default, tabs replace the browser history (using <code>history.replaceState()</code>). Modify this behavior by using <code>attribute data-update-history="true"</code> to append to the browser history (using <code>history.pushState()</code>). In the latter case the browser back button will track each click that opens a tab panel. By using deep linking (see below), the open state of a page's tabset may be shared by copy-pasting the browser URL.</p>
      
      <br><hr>
      <h4>Deep linking</h4>
      <p>Add the attribute <code>data-deep-link="true"</code> to a tabstrip to:</p>
      <ul>
        <li>modify the browser history when a tab is clicked</li>
        <li>allow users to open a particular tab at page load with a hash-appended URL</li>
      </ul>
      
    </div>
  </div>
  
  
  <!--~~~ row ~~~-->
  <div class="row">
    <div class="columns">
      
      <!-- BEGIN -->
      <section>
        <ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
          <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
          <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
          <li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
          <li class="tabs-title"><a href="#panel4d">Tab 4</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="deeplinked-tabs">
        
        <div class="tabs-panel is-active" id="panel1d">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        
        <div class="tabs-panel" id="panel2d">
          <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        
        <div class="tabs-panel" id="panel3d">
          <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
        </div>
      
        <div class="tabs-panel" id="panel4d">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    
      </div>
      </section>
      <!-- END -->
      
    </div>
  </div>
<br>
  
</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" />