How to fix an accordion tab issue in minimal theme?

Store Design

Topic summary

Accordion behavior in Shopify “minimal theme” product page: clicking an open tab triggers the close animation but it immediately reopens, so one tab stays active unless another tab is clicked. The goal is to allow closing the currently open tab by clicking it again.

Key context:

  • Tabs/accordion content is populated via Product metafields (using the Metafields Guru app).
  • A video and store preview link are provided; the issue is suspected to be in the jQuery click handler.

Proposed fixes and current state:

  • A jQuery rewrite is suggested to toggle the active state and slideUp/slideDown the associated “.card-body”, while switching Font Awesome plus/minus icons.
  • After the first script, the accordion stops opening once closed.
  • A “final” script is shared, including an initialization line intended to set the first header’s h3 as active: $(“.card .card-header h3”).first().addClass(‘Active’);
  • The original poster reports the updated version works but fires multiple times (multiple open/close animations), and later notes confusion because the initialization line seems missing/unclear where to place.

No confirmed resolution yet; the thread ends with the initialization line being emphasized and placement still unresolved.

Summarized with AI on February 26. AI used: gpt-5.2.
1

Hi everyone, added code to my minimal theme which adds an accordian to my theme but I’m having a slight issue. Whenever I try to close it does do the closing animation then opens again. But when I click on a different tab, that’s the only time it closes. There’s always one active tab. Need help fixing this, all help is appreciated!!

Here’s a video of the issue:

What I would like to instead happen is close upon clicking on it.

store link

Here’s the code:

Show More 
{%- if product.metafields.tab1.title and product.metafields.tab1.content -%}

### {{ product.metafields.tab1.title }}

{{ product.metafields.tab1.content }}

{%- else -%}{% render 'ymq-tab-initializer' %}
{%- endif -%} {%- if product.metafields.tab2.title and product.metafields.tab2.content -%}
### {{ product.metafields.tab2.title }}

{{ product.metafields.tab2.content }}

{%- endif -%} {%- if product.metafields.tab3.title and product.metafields.tab3.content -%}
### {{ product.metafields.tab3.title }}

{{ product.metafields.tab3.content }}

{%- endif -%} {%- if product.metafields.tab4.title and product.metafields.tab4.content -%}
### {{ product.metafields.tab4.title }}

{{ product.metafields.tab4.content }}

{%- endif -%} {%- if product.metafields.tab5.title and product.metafields.tab5.content -%}
### {{ product.metafields.tab5.title }}

{{ product.metafields.tab5.content }}

{%- endif -%}

P.S: I’m using the app metafields guru for the accordion.

P.S.S: I’m also pretty sure it has to do with the jquery code in the bottom of the code snippet. I was playing around with it but still haven’t come to a valid solution, once again ALL HELP IS APPRECIATED!!

2

I have visited the product page and understood what you want.

Are you familiar with Javascript coding?

If no, please DM me, I will help you.

3

Any help with this?

4

Please update the accordion description scripts with these.

1 Like
5

I actually added the code but the accordion doesn’t open once closed.

6

This is the final codes.

1 Like
7

It should be worked correctly.

I am sure.

1 Like
8

It’s in the live store you can see how it functions it works but it fires
multiple times before closing, and opening.

9

you are missing this code:

$(“.card .card-header h3”).first().addClass(‘Active’);

Please full copy my final codes and paste.

1 Like
10

I’m not sure where to put the mentioned code above, I copied the full code
but ( “”.card *card-header h3.) addClass (“Active”) *isn’t included in
the code you pasted above.