Re: Accordion Tab Issue

Solved

How to fix an accordion tab issue in minimal theme?

koze
Excursionist
19 2 5

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

 

 

 

 

 

 

 

Accepted Solutions (2)
SimonD
Shopify Partner
159 11 21

This is an 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> 

banned

View solution in original post

SimonD
Shopify Partner
159 11 21

This is an accepted solution.

you are missing this code:

 

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

 

Please full copy my final codes and paste.

banned

View solution in original post

Replies 9 (9)

SimonD
Shopify Partner
159 11 21

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.

banned

koze
Excursionist
19 2 5

Any help with this?

SimonD
Shopify Partner
159 11 21

This is an 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> 

banned
koze
Excursionist
19 2 5

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

SimonD
Shopify Partner
159 11 21

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> 

banned
SimonD
Shopify Partner
159 11 21

It should be worked correctly.

I am sure.

banned
koze
Excursionist
19 2 5
It’s in the live store you can see how it functions it works but it fires
multiple times before closing, and opening.
SimonD
Shopify Partner
159 11 21

This is an accepted solution.

you are missing this code:

 

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

 

Please full copy my final codes and paste.

banned
koze
Excursionist
19 2 5
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.