Why is my accordion menu not collapsing in Minimal Theme?

[koze]

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.

<style>
   .accordian {
      max-width: 600px;
      display: block;
   }
   .accordian .card {
      float: left;
      width: 100%;
   }
   .accordian .card .card-header h3 {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
      margin: 0;
   }
   .accordian .card .card-header:hover h3 {
      background-color: #ccc !important;
   }
   .active,
   .card-header__title {
      background-color: #ccc !important;
   }
   .noActive {
      background-color: #eee !important;
   }
   .accordian .card .card-header {
      position: relative;
   }
   .accordian .card .card-header span {
      position: absolute;
      right: 20px;
      top: 16px;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
      font-size: 13px;
   }
   .accordian .card .card-header span.fa-plus::after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
   }
   .accordian .card .card-header span.fa-minus::after {
      content: "\2212";
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
   }
   .accordian .card .card-body {
      padding: 20px;
   }
   .accordian .card .card-body {
      display: none;
   }
   /*open one card by default*/
   .accordian .card:nth-child(0) .card-body {
      display: block;
   }
   .accordian .card .card-body p {
      font-size: 15px;
      line-height: 24px;
      color: #444444;
      margin: 0px;
   }
</style>
<div class="accordian">
   {%- if product.metafields.tab1.title and product.metafields.tab1.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header__title">{{ product.metafields.tab1.title }}</h3>
         <span class="fa-minus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab1.content }}
         </p>
      </div>
   </div>
   {%- else -%}
   <div class="product-description rte" itemprop="description">
      {{ product.description }}
   </div>
   {%- endif -%}
   {%- if product.metafields.tab2.title and product.metafields.tab2.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab2.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab2.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
   {%- if product.metafields.tab3.title and product.metafields.tab3.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab3.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab3.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
   {%- if product.metafields.tab4.title and product.metafields.tab4.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab4.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab4.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
   {%- if product.metafields.tab5.title and product.metafields.tab5.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab5.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab5.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
</div>
<!-- jqurey code -->
<script>
   $(document).ready(function () {
      $(".card-header").click(function () {
         $(".card .card-header h3").removeClass("active")
         $(".card .card-body").removeClass("active").slideUp();
         $(".card .card-header span").removeClass("fa-minus").addClass("fa-plus");
         $(".card .card-header h3").removeClass("active").addClass("noActive");
         $(this).next(".card-body").slideDown();
         $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
         $(this).children("h3").removeClass("noActive").addClass("active");
      })
   })
</script>

[KetanKumar]

@koze 

sorry your store is password protect 

[koze]

emailed/messaged you the password 

[KetanKumar]

@koze 

sorry but can't see

[koze]

Password: lepies

[koze]

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.

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

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

[KetanKumar]

@koze 

modify this code

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

[koze]

Thank you so much!!

Where am I supposed to put those line of code?

[KetanKumar]

@koze 

yes please change that code product  page