Why is my accordion menu not collapsing in Minimal Theme?

Store Design
1

Thank you for taking the time to read my issue.

So I’ve made an Accordion/ drop down menu in my products page.

It works but I have some issues with it.

  • I have built an accordion on my page here however it is not collapsing. Is anyone able to suggest why? I will paste below the code used in the page template and also the page.

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

      

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

      
         

            {{ product.metafields.tab1.content }}
         

      

   

   {%- else -%}
   
      {{ product.description }}
   

   {%- 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 -%}
1 Like
2

@koze

sorry your store is password protect

3

emailed/messaged you the password

1 Like
4

@koze

sorry but can’t see

5

Password: lepies

6

It’s currently like below when you click the “-” to close the accordion it doesn’t fully collapse, it starts closing and just opens back up.

Screenshot 2021-11-13 1.14.10 PM.png
Screenshot 2021-11-13 1.14.10 PM.png1901×942 307 KB

I want it to be like below when you click on the “-” sign.

small_faq.png
small_faq.png347×116 18.1 KB

Also when opening the other tabs, it would bring the screen down. Any way to fix it so it doesn’t push the screen down when you open any other accordion?

Thanks for the help

https://venaida.com/products/ergonomic-laptop-stand

1 Like
7

@koze

modify this code

https://codepen.io/Frontend/pen/vNvOxG

8

Thank you so much!!

Where am I supposed to put those line of code?

1 Like
9

@koze

yes please change that code product page