Shopify themes, liquid, logos, and UX
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.
<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>
sorry your store is password protect
emailed/messaged you the password
sorry but can't see
Password: lepies
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
modify this code
https://codepen.io/Frontend/pen/vNvOxG
Thank you so much!!
Where am I supposed to put those line of code?
yes please change that code product page
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025