Foundation-sites: Collapsing Responsive-accordion Tabs? (Foundation 6)

[jinch]

So I'm having a really hard time figuring out why I can't collapse my accordion tabs using the Foundation 6.3 responsive tabs. The javascript provided in the foundation docs only seems to work with regular accordion setup and not the responsive-accordions tabs.

Is this a bug with the responsive accordions? Does anyone know of a reason why this does not work or a possible solution to get responsive accordion-tabs to collapse initial load?

How to reproduce this bug:

1. Use the responsive accordion setup
   > https://foundation.zurb.com/sites/docs/responsive-accordion-tabs.html
2. Use the javascript to close accordion: $('#element').foundation('up', $target);
   > https://foundation.zurb.com/sites/docs/accordion.html#up

What should happen:

Responsive accordion-tabs should close.

What happened instead:

Nothing

Browser(s) and Device(s) tested on:

Testing on Chrome / Safari/ Firefox - Mac OS

Foundation Version(s) you are using:

Foundation v6.3.1

Test case link:

CODE PEN TO DEMONSTRATE:
https://codepen.io/jinch/pen/RQxQNG

[ncoden]

Hi @jinch,

There is no up method in ResponsiveAccordionTabs or anything like that. I agree with you that this is a missing feature. I'll see if we can clean ResponsiveAccordionTabs for v6.5. Please note that we started working on v7, so we stopped providing any new complex feature in v6.

[DanielRuf]

You can use the breakpoint utilities to trigger the code when it is needed.

[DanielRuf]

The general problem is that the plugins are not fully initialized when you run your code.
Hm, seems the tab and accordion are not properly extended here.

[DanielRuf]

Hm, shouldn't the component fire an init event somewhere? I see no @event annotation or trigger() call. And I guess the generated docs should output an anchor which jumps to the right event.

[jinch]

So i found a very strange workaround ~ if you place a duplicate DIV in the markup with the same id as your responsive accordion ~ than the up method will actually work with responsive accordion-tabs!?

NOT SURE WHY?
https://codepen.io/jinch/pen/dddywj?editors=1010

Is there a better way to do this without the extra markup? I know this is for an outdated version now but would be a great benefit if a solution could be found for retro-active versions.

[ncoden]

Hm, shouldn't the component fire an init event somewhere.

It is done by Foundation.Plugin.

[DanielRuf]

It is done by Foundation.Plugin.

Ah ok. I'm currently checking to add the needed methods in there.

[DanielRuf]

https://codepen.io/DanielRuf/pen/wyyBPW

Not sure how we can solve this in the best way.

Currently I have for testing

  }
+  up(target){
+     if( typeof this.currentPlugin.up === 'function'){
+       this.currentPlugin.up(target);
+   } else {
+       return;
+   }
+  }
+
  _handleMarkup(toSet){

[DanielRuf]

This is just a rough idea. Any suggestions how we can tackle this or register the methods and unregister them is welcome. I'm open for discussions about the best solution.

[ncoden]

Sounds dirty but _destroy works that way:

https://github.com/zurb/foundation-sites/blob/0f6cfd2763e5cd2836483b83dcd8ab176f605a63/js/foundation.responsiveAccordionTabs.js#L232-L235

This is the way the component works 😷 . Instantiate others components inside it and redirect methods.

@DanielRuf I open a PR with:

if (this.currentPlugin.up) return this.currentPlugin.up(); 

[jcraitz]

What is the timeline like for merging #10961? I'm currently using responsiveAccordionTabs to show tabs on medium+ and accordions on small screens. In my use case it would make sense to be able to initially open all the accordions on small screens. Currently this isn't possible with no 'down' method available for ResponsiveAccordionTabs.

[DanielRuf]

@jcraitz download https://github.com/DanielRuf/patches/blob/master/foundation-sites/responsive-accordion-tabs-methods/foundation-sites%2B6.4.3.patch, create a patches folder in the same level like package.json and install patch-package.

[DanielRuf]

See https://www.npmjs.com/package/patch-package

And don't forget

"scripts": {
  "prepare": "patch-package"
}

in package.json.

[DanielRuf]

If you need in more files, please let me know. I just patched a few single files for this. Not the full bundled foundation(.min).js files.

[jcraitz]

@DanielRuf Thank you for the offer! However, my project is still in development and, unfortunately, the final version will not have direct control of the foundation includes that the main site is pulling in. The workaround from @ncoden is enough for me, for now. I'll be able to reevaluate before product launch to see if either this PR has been merged at that time or if I need to petition the local team responsible for pulling in the foundation includes to include your patch.

Thank you for your help! I learned a good bit from reading through your patch and documentation! Cheers!

[DanielRuf]

The patch would be applied on each npm install.

[Backoo]

Any news on this and/or https://github.com/zurb/foundation-sites/pull/10961 or v7?

[DanielRuf]

Hi @Backoo. No news.