Foundation-sites: [Toggler] + [Callout] & data-closable

[andycochran]

It would be nice to be able to combine a data-closable Callout with Toggler so that it can be repeatably opened. As is, they can't be combined since data-closable uses an inline styles animation ending with display:none. Could we add an option to either use the animation or simply add the .hide class?

[andycochran]

I suppose the solution here is to not use data-closable, but instead add Toggler to the close-button.

[andycochran]

So, I'm satisfied with the above method for reopening closable Callouts (using Toggler instead of data-closable). However, I'm wondering if 6.2's new ability for Toggler to control multiple elements could/should be extended to cover the following use case.

• Multiple hidden elements, e.g. Callouts
• Each is opened by a data-toggle button
• Each can be closed/reopened
• Only one element can be toggled open at a time

I ended up rolling my own solution: http://codepen.io/andycochran/pen/yedGeL

Maybe this is an edge case. And it's easy to do yourself. But I do see it as a fairly common UI. If it's too specific, it'd make a good building block at least.

[andycochran]

@Owlbertz, being the JavaScript guy, any thoughts on this before I close it?

[Owlbertz]

I guess this would be a nice alternative for accordion and tabs in some cases that allows a little more customized styling than these two modules. I do agree that this should be at least mentioned as a building block somewhere.

I also think that making toggler able to do exactly this (toggle multiple elements so that only one is visible) would be a nice enhancement for the next version, maybe using something like data-toggle-single="true"?

[andycochran]

Awesome. Thanks for the feedback. Gonna close this now. But we'll keep it in mind for a future version of Toggler.