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
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We 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, 2024