Skip Navigation

[Resolved] Collapsed Accordions on Page Load

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.

This topic contains 4 replies, has 2 voices.

Last updated by cristianR-3 2 years, 3 months ago.

Author
Posts
#662539

I am trying to: To have all accordions collapsed when the page first opens

Link to a page where the issue can be seen: hidden link

I expected to see: All accordions collapsed.

Instead, I got: The first accordion is always open

#662592

I attempted this with no effect.

jQuery(document).ready(function() {
$('.panel-default > .panel-heading > .panel-title > a').addClass('collapse');
});

#664666

https://toolset.com/documentation/user-guides/accordion-cell/
hidden link

This is the default Bootstrap Behavior of Collapse.
Mainly this is managed by the class "collapse in" and collapse"
If you add the "in" to the related DIV Collapse Body class, it'll be expanded on load.

What you can do is edit the Accordion Cell in Toolset Layouts (not the single Accordion Collapsible Item, but the entire Cell).
There you will see an option to add an ID.
Later you can remove the "in" class from all occurrences within that parent DIV.
That's easy with JS:

//Replace "contains" with the ID you gave to your Accordion Cell in Toolset Layouts
jQuery('#contains').find('.in').replaceWith('');

PS:
"$" Should not be used within WordPress JS:
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/#achieving-great-results-with-little-coding-by-using-jquery

I think this would though be a good feature in the cell.
I will add it and request the Developers to evaluate its doability.

#664670

Please ignore the previous one, this will not work and there is much a simpler approach.

Just create your Accordion cell as used to.
No need to add any ID anywhere.

Then add this to the JS Section of Toolset JS/CSS:

jQuery('[id^=ddl-panel_]').removeClass('in');

Load the Fron End, now you should see all accordions closed, and on click, each accordion should properly expand.

What we do with the code above is targeting every accordion body produced and remove the "in" class.
Since Toolset Layouts automatically generates the ID with a random number I used a wildcard to address the hardcoded Toolset Layouts Accordion body prefix:

ddl-panel_

That is the correct solution.

#664741

Beda, thanks for your diligence and quick response. Yes, that is exactly what I was looking for. Simple JQuery function that would remove the class that triggered the panel to open.