Accordion default open items

Hi there,

thanks for the kind words 🙂

Can i see what you have so far on your site ? It may be possible with a little extra JS.

You could try some JS to “click” on each accordion item after to load to open them all and only on larger screens:

<script>
const accordionItems = document.querySelectorAll('.gb-accordion__item');

if (window.innerWidth >= 768) {
  accordionItems.forEach((item) => {
    const clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });

    // Dispatch the click event on the accordion item element
    item.dispatchEvent(clickEvent);
  });
}
</script>

Ooh.. I didn’t realise the entire page were accordions.
Ok, remove the script I provided.

Then set all the items to be closed by default.
We can then use some CSS on desktop only to force them ALL to be open.

Something like this:

@media(min-width: 769px) {
    .open-on-desktop  .gb-accordion__content {
        max-height: inherit !important;
    }
}

And select the Accordion Items Block and give it a class of: open-on-desktop

If that don’t work, then close the accordions on desktop and let me know

Awesome
Glad to be of help 🙂