Shopify themes, liquid, logos, and UX
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.
Here's the code:
<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!!
Solved! Go to the solution
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>
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.
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.
Any help with this?
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>
I actually added the code but the accordion doesn't open once closed.
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>
It should be worked correctly.
I am sure.
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024