-
Hi,
I’ve a query loop which put data in an accordion, generating then for each content an accordion.
https://i.postimg.cc/bvxcnd7D/Screenshot-from-2025-01-31-19-52-48.png here the structure.Is there a way to keep the first accordion open on page load and the other closed?
(since the three are single accordion and not items the “open by default” option will apply to all of them.Thank you!
Davide
-
Alvind
Hi there,
In that case, you would need a custom JavaScript solution to achieve that, but unfortunately, that is outside the scope of our support.
-
Hi Alvind, thank you for your replay (I didn’t get any mail even if I had the checkbox checked).
Anyway, posting here for the community:
document.addEventListener("DOMContentLoaded", function () { let firstAccordionItem = document.querySelector(".gb-accordion__item"); if (firstAccordionItem) { firstAccordionItem.classList.add("gb-accordion__item-open"); } });
This one leave the first accordion open.
As an alternative we can add a true / false field in the repeater field of the accordion in ACF, add the field in the accordion-item (as hidden field, in my case with the class “accordion-open-value”) and that’s the code (thanks AI ..ehhhhhmmm ;))
document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll(".gb-accordion__toggle").forEach((toggle) => { let openValue = toggle.querySelector(".accordion-open-value"); if (openValue && openValue.textContent.trim() === "1") { toggle.closest(".gb-accordion__item").classList.add("gb-accordion__item-open"); } }); });
Still haven’t test it super thoroughly, but it should work.
-
Alvind
Great solution, thanks for sharing that! 🙂
- You must be logged in to reply to this topic.