create an accordion for product descriptions

Highlighted
Tourist
15 0 3

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 5

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
Highlighted
Tourist
15 0 3

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
Highlighted
Tourist
15 0 3

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

Highlighted
Tourist
8 0 1

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
Highlighted
New Member
1 0 1

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>

Highlighted
New Member
3 0 0

Thanks for your code.

But it's not working like accordeon. Just like a spoiler.

I'm using Minimal Theme.

Link: https://wishop.club/products/kurs-vysshij-pilotazh-v-zhizni-kniga-zhizni-caricy

 

Could you help me with it?

Thanks in advance!

 
0 Likes
Highlighted
Shopify Partner
16 0 4

You can create a snippet for this.  I was using a sectioned theme. I would suggest doing this on a copy of your theme and using an alternate template. This is a pure html/css accordion. No JS. 

 

Create a new snippet called "product-accordions" 

Add this code and stylize as you want: 

 

<style>
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #000;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #BBB;
}
.accordion-bral input + .ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked + .ac-label,
.accordion-bral input:checked + .ac-label:active {
background-color: rgba(79, 79, 79, 0.5) !important;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 0px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked ~ .article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked ~ .article.ac-content {
height: auto;
}

.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 16px;
right: 0;
}
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
ul.ac-list {
padding-left: 40px;
padding-top: 20px;
list-style-type: disc;
}

table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th{
text-align: left;
}

@media (max-width: 550px) {
.accordion-bral .ac-label {
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
/* ---------- accordion style end --------------------------------------- */

</style>

<div class="accordion-bral">

<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">Product Features<i></i></label>
<div class="article ac-content">
<ul class="ac-list">
<li>Information as a list</li>
</ul>
<br>
</div>
</div>
<!-- accordion item 1 -- end -->

<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">Product Info<i></i></label>
<div class="article ac-content">
<ul class="ac-list"><li>Content as a unordered list</li>
</div>
</div>
<!-- accordion item 2 -- end -->

<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Other Info<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->

<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">More Info<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 4 -- end -->

</div>

 

 

Save and then add this snippet  {% include 'product-accordions' %} to your product template below the {% 'product description'} or wherever you want. (I would suggest using an alternate template! :D) 

Highlighted
New Member
3 0 0

Thanks for your code, but again it's not an accordeon.

Just a spoiler.

The "accordion" differs from the "spoiler" in that when you open the second menu, the first is minimized.
In the spoiler - remains open, as you

And, as I understand your code, the insides of the accordion are written in the snippet, and will added to ALL products.
But I need to selectively

 

But it's an interesting way to add information

Thanks! 

0 Likes
Highlighted
Shopify Partner
16 0 4

Hi Alphabit! 

  So to understand fully: You do not want the first accordion open on load correct? You can have all accordion closed by removing "checked" from the first accordion div. <input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/

Do you also want each accordion to close once another is clicked, or do you want them all to remain open? 

 

You can create an alternate template and add this snippet to that template. Then select the products that you want an accordion on. It does not have to be on all products, only the the ones you select to use the alternate template. 

 

Let me know! Cheers