Foundation/Responsive Accordion Tabs (Flex)

foundation-responsive-accordion-tabs-flex.markdown

Foundation/Responsive Accordion 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>Responsive Accordion Tabs</h2>
      <p>Either the <a href="//foundation.zurb.com/sites/docs/accordion.html">Accordion Markup</a> or the <a href="//foundation.zurb.com/sites/docs/tabs.html">Tabs Markup</a> can be used to responsively switch between the two components at different breakpoints.</p>
    </div>
  </div>

  
  <div class="row">
    <div class="columns">
      <h4>Accordion HTML Markup</h4>
      <div class="secondary callout">
        <p>Once you put it all together, here's what you get!<br /> Scale your browser down to see the toggle happen.<br>I am an <code>Accordion on small and large</code> but I am <code>Tabs on medium</code></p>
      </div>
    </div>
  </div>

  
  <div class="row">
    <div class="columns">
      <ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
        
        <li class="accordion-item is-active" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 1</a>
          <div class="accordion-content" data-tab-content >
            <p>Panel 1. Lorem ipsum dolor</p>
            <a href="#">Nowhere to Go</a>
          </div>
        </li>
        
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 2</a>
          <div class="accordion-content" data-tab-content>
            <textarea></textarea>
            <button class="button">I do nothing!</button>
          </div>
        </li>
        
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 3</a>
          <div class="accordion-content" data-tab-content>
            Pick a date!
            <input type="date" />
          </div>
        </li>
        
      </ul>
    </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" />