How to fix an accordion tab issue in minimal theme?

[koze]

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:

Click to expand...

<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(1) .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">
      {% render 'ymq-tab-initializer' %}
   </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>

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!!

[SimonD · Accepted solution]

Please update the accordion description scripts with these.

<!-- jqurey code -->
<script>
$(document).ready(function () {
$(".card-header").click(function () {
$(".card .card-body").removeClass("active").slideUp();
$(".card .card-header span").removeClass("fa-minus").addClass("fa-plus");
$(".card .card-header h3").removeClass("active").addClass("noActive");
if($(this).hasClass('active')){
$(this).slideDown ();
$(this).children("span").removeClass("fa-plus").addClass("fa-minus");
$(this).children("h3").removeClass("noActive").addClass("active");
}
})
})
</script> 

[SimonD]

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.

[koze]

Any help with this?

[SimonD · Accepted solution]

Please update the accordion description scripts with these.

<!-- jqurey code -->
<script>
$(document).ready(function () {
$(".card-header").click(function () {
$(".card .card-body").removeClass("active").slideUp();
$(".card .card-header span").removeClass("fa-minus").addClass("fa-plus");
$(".card .card-header h3").removeClass("active").addClass("noActive");
if($(this).hasClass('active')){
$(this).slideDown ();
$(this).children("span").removeClass("fa-plus").addClass("fa-minus");
$(this).children("h3").removeClass("noActive").addClass("active");
}
})
})
</script> 

[koze]

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

[SimonD]

This is the final codes.

<!-- jqurey code -->
<script>
$(document).ready(function () {

$(".card .card-header h3").first().addClass('Active');
$(".card-header").click(function () {
$('.card .card-header').click(function() {
if ($(this).children('h3').hasClass("Active")) {
$(this).children('h3').removeClass("Active").parent().parent().find(".card-body").slideUp();
$(this).children("span").removeClass("fa-minus").addClass("fa-plus");
} else {
$(".card .card-header .Active").parent().parent().children('.card-body').slideUp();
$(".card .card-header .Active").removeClass("Active");
$(this).children('h3').addClass("Active").parent().parent().find(".card-body").slideDown();
$(this).children('h3').parent().children('span').removeClass("fa-plus").addClass("fa-minus");
}
return false;
});
})
})
</script> 

[SimonD]

It should be worked correctly.

I am sure.

[koze]

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

[SimonD · Accepted solution]

you are missing this code:

$(".card .card-header h3").first().addClass('Active');

Please full copy my final codes and paste.

[koze]

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.