Skip to content

Instantly share code, notes, and snippets.

@jhkueh
Last active October 18, 2017 08:23
Show Gist options
  • Select an option

  • Save jhkueh/e623fb60bfe1f39af5aada7d09b14437 to your computer and use it in GitHub Desktop.

Select an option

Save jhkueh/e623fb60bfe1f39af5aada7d09b14437 to your computer and use it in GitHub Desktop.
Foundation Tabs: Each `<a>` link in `<li>` SHOULD & MUST have a `href` that match the ID of a tab

Foundation Tabs: Each <a> link in <li> SHOULD & MUST have a href that match the ID of a tab.


Failure to do so will result in JS error.

E.g. The code below is invalid:

<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="https://www.google.com">Google</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <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="panel2">
    <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
  </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment