Accordion – Open the first Accordion on Query Loop

Sorry your last reply slipped through our system.
Hmmm… theres no option for that, as effectively each Accordion it outputs is its own accordion block, that all share the same identical settings.

The workaround would be:

1. Close the items by default.
2. In a HTML block after the Query Loop add this script:

<script>
var accordionItem = document.querySelector('.gb-accordion__item');
if (accordionItem) {
    var button = accordionItem.querySelector('button');
    if (button) {
        button.click();
    }
}
</script>

That will open the first accordion for you.

The HTML block with the script has to be after the query loop / accordions. Not before it.

thats correct.

Hi there,

Try replacing David’s code to this:

<script>
   var accordionItem = document.querySelector('.gb-container-48972393');
   if(accordionItem) {
      accordionItem.classList.add('gb-accordion__item-open');
   }
</script>

Unfortunately, that would require extensive JavaScript customization, and it’s beyond the scope of what we cover.

Does the accordion really need to be displayed using a query loop? It seems like a single Accordion block would be sufficient as it allows for more control, but perhaps it is not feasible in your use case.

No problem at all!