Shopify themes, liquid, logos, and UX
Hi, I 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.
<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">
{{ 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>
sorry your store password protect
User | RANK |
---|---|
137 | |
97 | |
79 | |
62 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023