Skip Navigation

[Resolved] Manual Control Over Accordion Expanding and Collapsing

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Dave 5 years, 5 months ago.

Assisted by: Christian Cox.

Author
Posts
#1268347

Tell us what you are trying to do?

Manually adjust which part of the accordion cell opens when a link is clicked.

The idea being that if the user selects something from a view in the first section of the accordion then it will collapse and open the relevant sub-content in a lower section of the accordion. I have the functionality working (although I'd like it to refresh the accordion via Ajax rather than the whole page, but one thing at a time), and according to the Bootstrap docs it should be possible to control sections in such a way:

[link]hidden link;

But the accordion sections that you use seem to dynamically alter their id's on every page reload and there is no way to set an overriding id anywhere. Adding one to the accordion in the editor simply applies it to the cell, not the accordion section.

I believe that if I could assign static id's then something like this should work:

[code]

[wpv-post-title]
[/code]

In this example, the data-parent and aria-controls are the current id's of the accordion panels, but they will change on a refresh rendering this useless.

What is the link to your site?

[link]hidden link;

#1268551

Hi, Toolset currently supports Bootstrap 3 and the doc you linked to is specifically for Bootstrap 4. So be careful, there are some nuanced differences in functionality and even markup structure. With that being said, the Accordion cell isn't flexible enough to give you granular control over the IDs. The only way you'll have complete control over the IDs and classes assigned to the individual panel elements is to use your own custom code to create the accordion markup structure. That code can then be placed in a Visual Editor cell using the text tab. You can find example markup in the Bootstrap documentation. I would use version 3's documentation examples for the best results: https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion

Let me know if you have questions about that.

#1268637

I've got to be honest, that's really disappointing as writing a large work around of my own is exactly what I was hoping to avoid and precisely the kind of thing that I like to use Toolset for.

If nothing else, conditional control of the accordion cell panels (and probably the tabs cell as well) should definitely be a feature request as it is very rigid as it is.

I'll have a dive into the v3 Bootstrap docs and figure something out so thanks for that pointer.

#1268643

I encourage you to submit your request over here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
This will put your suggestion in front of key decision makers who influence upcoming features.

#1268647

Cheers bud, I will do that as it's a significant oversight.

Thanks for the info.