Please update for Foundation v5.5; example missing accordion navigation class

Nathaniel T
(@nathaniel-t)

9 years, 3 months ago
This app is incredibly useful for the sites I develop with Foundation and therefore I want to pass on a bug that’s appeared. I have found that the accordions, for example, are not interacting properly with WP version 4.1, plugin version 2.5.0 and Foundation v5.5.0.

The class, accordion-navigation, appears to be missing, resulting in the accordions not toggling to show their contents. This might be something just missed in the coding of this plugin or it might be a change from Foundation v5.0 to v5.5. In either case if we are using the latest version of Foundation in our themes it appears that some of the required classes may be missing.

According to the Foundation 5.5 documentation, http://foundation.zurb.com/docs/components/accordion.html, the markup should output like this:
```
<dl class="accordion yourcustomclass" data-accordion="" id="oscitas-efs-toggle-2">
    <dd class="accordion-navigation active">
	    <a href="#efs-tooglepane-2-0">Accordion number 1</a>
	    <div class="content active" id="efs-tooglepane-2-0">Toggle 1 content goes here.</div>
    </dd>
    <dd class="accordion-navigation">
	    <a href="#efs-tooglepane-2-1">Accordion number 2</a>
	    <div class="content" id="efs-tooglepane-2-1">Toggle 2 content goes here.</div>
    </dd>
    <dd class="accordion-navigation">
	    <a href="#efs-tooglepane-2-2">Accordion number 3</a>
	    <div class="content" id="efs-tooglepane-2-2">Toggle 3 content goes here.</div>
    </dd><dd class="accordion-navigation">
	    <a href="#efs-tooglepane-2-3">Accordion number 4</a>
	    <div class="content" id="efs-tooglepane-2-3">Toggle 4 content goes here.</div>
    </dd>
</dl>
```
https://wordpress.org/plugins/easy-foundation-shortcodes/

Viewing 2 replies - 1 through 2 (of 2 total)

iamSeanGrant
(@iamseangrant)

9 years, 2 months ago

For others who stop by here looking for an answer/fix.

I was able to get mine working by editing the plugin directly.

Note: I’m using WP 4.1, FoundationPress (using Foundation 5.5.1 as of now) as my Theme, and added Easy Foundation Shortcode as a plugin. I set the plugin to use the Theme’s js and css.

To get the accordion shortcodes to work I edited plugin_dir/toggles/plugin_shortcode.php directly. Specifically I edited line 69 (hehe) where it is adding the <dd> tag.

So this:
<dd>

Became this:
<dd class="accordion-navigation '. $active .'">

Everything else seems to output like Nathaniel T suggested.

HTH

jryanp
(@jryanp)

8 years, 8 months ago

I too noticed this issue as well. I had a hardcoded Foundation 5 accordion, but used the EFS accordion shortcode in a page. When trying to style the accordions, I noticed the EFS accordion wasn’t picking up the style, thats when I realized it didn’t have the ‘accordion-navigation’ class. However, the EFS accordion still worked fine. All I had to do was adjust my style rule.

So it may be a small compatibility issue with FoundationPress. I personally use Joints-WP as my Foundation 5 starter theme. EFS seems to work perfectly with Joints-WP.

If you don’t want to edit the EFS plugin, I would suggest using jQuery to add the accordion-navigation class. You could do something like:
$('.accordion dd').addClass('accordion-navigation');

I haven’t actually tested, but should work.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Please update for Foundation v5.5; example missing accordion navigation class’ is closed to new replies.