How to fix an accordion tab issue in minimal theme?

Store Design
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.