Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

[GB 2.0] Accordion in a query loop – first accordion stays open.

  • 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

  • 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.

  • Great solution, thanks for sharing that! 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.