[Resolved] Collapsed Accordions on Page Load

[Author]

Posts

[cristianR-3]

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

[cristianR-3]

I attempted this with no effect.

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

[Beda]

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.

[Beda]

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.

[cristianR-3]

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.