Menu icon Foundation
'Distributed accordion groups' not working!

I am trying to recreate the 'distributed accordion group' example from the Foundation documentation: http://foundation.zurb.com/docs/components/accordion.html

In the example, you can separate an accordion group into two columns using block-grid. When you click on an item in one column, the content of that panel will be revealed. If you click on another from a different column, the existing active panel will hide its content and reveal the new one. However, I can't get this to work. Each column acts like its own separate accordion group.

I copied and pasted the example from the documentation into JSFiddle and although it works in the documentation, it doesn't actually work in practice! Argh!

Here is the fiddle: http://jsfiddle.net/DQf7t/1/

If I'm missing something or if anyone has any suggestions, I would greatly appreciate it. Thanks.

Foundationaccordion

I am trying to recreate the 'distributed accordion group' example from the Foundation documentation: http://foundation.zurb.com/docs/components/accordion.html

In the example, you can separate an accordion group into two columns using block-grid. When you click on an item in one column, the content of that panel will be revealed. If you click on another from a different column, the existing active panel will hide its content and reveal the new one. However, I can't get this to work. Each column acts like its own separate accordion group.

I copied and pasted the example from the documentation into JSFiddle and although it works in the documentation, it doesn't actually work in practice! Argh!

Here is the fiddle: http://jsfiddle.net/DQf7t/1/

If I'm missing something or if anyone has any suggestions, I would greatly appreciate it. Thanks.

Wing-Hou Chan over 5 years ago

Hey Adam!

The version you are using from the CDN is not up-to-date. For the latest version clone the repo at https://github.com/zurb/foundation

I did a test in CodePen and it works.