create an accordion for product descriptions

Tourist
14 0 2

hi guys i cant find a free plugin for creating accordions in shopify can you explain how to do this. 

I'd like to recreate this style where on desktop under the images it shows everything expanded but on mobile its collapsed into an accordion https://www.bestmadeco.com/products/waxed-canvas-blanket?option_values=7155&taxon_id=1180

 

I checked with  https://apps.shopify.com/powr-faq and they only support one accordion for all product pages not different text for each product page 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
33 0 4

Hi Criesner!

I couldn't find the exact style you were looking for, (expanded on desktop, accordion on mobile). However, I did find this popular tutorial on how to build an accordion with code to look like the below.
Image

I'd be interested to know if any of these work for you, Criesner! I took a sneak peek at your site and have to say, I'm excited to see what you've got coming down the pipeline! I like your logo a lot :) Do you have any plans for your SEO and marketing? I'd be happy to chat strategy anytime!
Here are a couple of my most recent favourites from our blog!

I look forward to hearing from you,
Parker

0 Likes
Tourist
14 0 2

Thank you, i'm not sure that will work, i know the free plugin you posted wont work. basically the accoridion tutorials i'm seeing make it so you can create a faq where it repeats in ever page the same content. i need to create different content in each accoridion on each page. 

 

0 Likes
Tourist
14 0 2

I'm wondering if maybe this tab tutorial if there was a way to stack the tabs and make it more like an accordion? 

 

https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions

0 Likes
Tourist
7 0 0

Hi all,

has anyone solved this? I am equally stuck.

after following this helpful guide on product tabs: https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions

 

on my mobile layout it does not look or act well:


mobile layout.PNG

0 Likes
New Member
1 0 0

Make sure you have selected the editor, then paste this directly in:

 

 

<body>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.7s;
}

.active, .accordion:hover {
background-color: #658da7;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.8s ease-out;
border-bottom: 3px solid transparent;
}
</style>

 

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

 

</body>

0 Likes