How to keep shopify accordion open at default?

Ask & Offer

Topic summary

A user seeks to keep the last accordion tab open by default on their Shopify site (inchdealer.com).

Attempted Solution:
They tried adding a checkbox setting (custom_open_default) with conditional logic ({% if block.settings.custom_open_default %} open {% endif %}), but it doesn’t function correctly.

Key Issue:
The accordion is JavaScript-based rather than using native HTML <details> elements, so standard HTML attributes won’t work.

Working Solution Provided:

  • Add a “Custom liquid” section in the Customize editor
  • Insert JavaScript code that automatically “clicks” the last accordion button on page load
  • No theme code editing required

The script uses querySelectorAll to target accordion buttons, selects the last one with .pop(), and triggers a click event via dispatchEvent.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

how to keep the last accordion tab open at default?

my site: inchdealer.com

2

@michelle012 a blessed day,

Usually, this involves custom code adjustment in the existing sections / block in the theme,

3

hi devengr, im aware of the code adjustments.

I tried to add: {% if block.settings.custom_open_default %} open {% endif %}

with: {
“type”: “checkbox”,
“id”: “custom_open_default”,
“label”: “Open by default”,
“default”: false
}

The open at default block appears but does not seem to function correctly

4

It’s a javascript based accordion, not a html <details> element so customizations are needed.
Reach out for services to get this done properly.

5

In Customize, add a “Custom liquid” section at the bottom of the template.
Paste the code below.

The code “clicks” the last accordion button on this page.
Does not require theme code edit.

<script>
  window.addEventListener('load', () => {
    [...document.querySelectorAll('.section-accordion button')]
      ?.pop()
      ?.dispatchEvent(new Event('click'))  
  });
</script>