Accordion toggles fail to expand

[lbartholomew]

Hi Jason,

I’ve used this feature before right out of the box without issue but cannot get it to work on this new site:
http://baileycg.gonoc.net/human-resources-faq/

Specifically, none of the toggles will expand on any device PC, mobile etc.

Here is the actual (unmodified) shortcode that was inserted:

[accordion]
[toggle title="Toggle #1"]Content of toggle #1.[/toggle]
[toggle title="Toggle #2"]Content of toggle #2.[/toggle]
[toggle title="Toggle #3"]Content of toggle #3.[/toggle]
[/accordion]

WP version 4.5.2
Jumpstart version 2.1.0
Theme Blvd Importer by Theme Blvd version 1.0.2
Theme Blvd Layout Builder by Theme Blvd version 2.0.9.5
Theme Blvd Shortcodes by Theme Blvd version 1.5.9.1
Theme Blvd Sliders by Theme Blvd version 1.2.5
Theme Blvd Widget Areas by Theme Blvd version 1.2.4
Theme Blvd Widget Pack by Theme Blvd version 1.0.5
Tweeple by Theme Blvd version 0.9.4

Thanks in advance,
Larry

Topic

[Jason Bobich]

Hi Larry,

That’s a bit of a weird one. I’ve tested the toggles on my end in the latest version of the theme and all seems to be working fine. So, there has to be something unique on your site or maybe something unique about the setup that’s different from how I’m testing.

I can see that when the toggle is clicked, none of Bootstrap’s javascript is taking effect (the toggles are an element of the Bootstrap frontend framework). Now normally when something like this happens, there will be some sort of javascript error in the browser’s console that could lead me towards a clue, but I’m not seeing anything.

I know this is annoying, but can you try to disable all third-party plugins, including Gravity Forms, to see if we can find what might be causing a conflict?

[Jason Bobich]

This is probably not the cause and a bit of a wild shot, but can you also try wrapping the accordion in the [raw] shortcode? I’m not sure if this will fix the issue, but it will make it all look a little nicer, anyway, by removing unwanted <br> tags.

[raw]
[accordion]
[toggle title="Toggle #1"]Content of toggle #1.[/toggle]
[toggle title="Toggle #2"]Content of toggle #2.[/toggle]
[toggle title="Toggle #3"]Content of toggle #3.[/toggle]
[/accordion]
[/raw]

[Jason Bobich]

You figured it out! What was the issue?

[lbartholomew]

You nailed it Jason, it was a rogue plugin that I tested a while back and then never used. I even forgot it was installed – DUH, next time I’ll remember this lesson 🙂

Culprit Plugin:
“Insert Headers and Footers”
Version: 1.3.3
Author: WPBeginner
==============

I have another question while we’re discussing the toggles … I’ve spent considerable time today trying to figure out the CSS to change the “open” and “closed” icons along with the “question” font attributes. Can you identify the correct classes I need to modify?

Thanks again for a great theme and terrific support!
Larry

[Author]

Replies