Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Responsive Accordion Tabs #931

Closed
frankspin89 opened this issue Jan 2, 2017 · 3 comments
Closed

Responsive Accordion Tabs #931

frankspin89 opened this issue Jan 2, 2017 · 3 comments

Comments

@frankspin89
Copy link

How can this bug be reproduced?

  1. Clean install FoundationPress
  2. Added the Responsive Accordion Tabs, new in Foundation 6.3

What did you expect to happen?
Expected to work as described on Foundation Documentation

What happened instead?
Didn't work. Tabs and accordions are not clickable.

Please List the Following:

  • Mac OSX
  • Node 7.x
  • Foundation 6.3

As listed on the documentation for the Responsive Accordion Tabs. You have to require foundation.zf.responsiveAccordionTabs.js

On a clean install the foundation.zf.responsiveAccordionTabs.js is not included in the gulpfile.js. After adding the file the Accordion are still not working as expected.

@frankspin89
Copy link
Author

After a hour reading in the Foundation Docs I have a working solution.

<ul class="tabs" data-responsive-accordion-tabs="accordion medium-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>
</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>

@brycejacobson
Copy link

Just ran into this.

Add 'assets/components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js', to the gulpfile.js until its been added by default.

@olefredrik
Copy link
Owner

Fixed in #934

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants