Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic accordion for Shopify product
{% comment %}
<!--
Liquid will output content, split on h3s like this:
<div class="accordian">
<h5><a href="#free-shipping" data-accordian-action>Free & Fast USA Shipping <span>+</span></a></h5>
<p id="free-shipping" data-accordian-target>All orders are shipped through USPS. We pride ourselves on fast delivery. Orders typically arrive within 2-5 business days. You will receive an email with tracking information when your order is ready to ship.</p>
<h5><a href="#international-shipping" data-accordian-action>International Shipping <span>+</span></a></h5>
<p id="international-shipping" data-accordian-target>International shipping rates vary based on item(s). Shipping rates can be seen on the checkout page. International orders typically arrive within 7-10 business days, but can vary with customs clearance in each country. </p>
</div>
-->
{% endcomment %}
<div class="accordian">
{% assign description_parts = product.description | split: '<h3>' %}
{% for part in description_parts %}
{% unless part == blank %}
{% assign part_parts = part | split: '</h3>' %}
{% assign heading_handle = part_parts.first | handle %}
<h5><a href="#{{ heading_handle }}" data-accordian-action>{{ part_parts.first }} <span>+</span></a></h5>
<p id="{{ heading_handle }}" data-accordian-target>{{ part_parts.last | remove: '<p>' | replace: '</p>','<br><br>' }}</p>
{% endunless %}
{% endfor %}
</div>
<script>
var lastClick;
var accordianActions = document.querySelectorAll('[data-accordian-action]');
var accordianTargets = document.querySelectorAll('[data-accordian-target]');
var hideTargets = function () {
for (var i = 0; i < accordianTargets.length; i++) {
var accordianTarget = accordianTargets[i];
accordianTarget.style.display = 'none';
}
};
var showTarget = function (targetSelector) {
var target = document.querySelector(targetSelector);
target.style.display = 'block';
};
hideTargets();
for (var i = 0; i < accordianActions.length; i++) {
var accordianAction = accordianActions[i];
accordianAction.addEventListener('click', function (e) {
e.preventDefault();
hideTargets();
if (lastClick !== e.currentTarget) {
showTarget(e.currentTarget.getAttribute('href'));
lastClick = e.currentTarget;
} else {
lastClick = null;
}
});
}
/* jQuery version of the above code.
$(document).on('click', '[data-accordian-action]', function (e) {
e.preventDefault();
$('[data-accordian-target]').hide();
if (lastClick !== e.currentTarget) {
$(e.currentTarget.getAttribute('href')).show();
lastClick = e.currentTarget;
} else {
lastClick = null;
}
});
*/
</script>
<style>
.accordian h5 {
padding-bottom: 5px;
border-bottom: 1px solid #f0f0f0;
}
.accordian h5 span {
float: right;
}
</style>
@ruiabg27

This comment has been minimized.

Copy link

@ruiabg27 ruiabg27 commented Aug 31, 2018

Dear Stewart I've tried to:

  • copy your code at the end of "product.liquid" file of Shopify theme Minimal.

  • Place the first commented part at "product-template.liquid".

But failed to have the accordian in the product page. I'm I missing something?
image

@ivy-89

This comment has been minimized.

Copy link

@ivy-89 ivy-89 commented Dec 11, 2018

@ruiabg27

1 Create a new SNIPPET and call it anything: 'product-accordion.liquid'

2 Insert the above code exactly as it is. In my instance Im using H6's so I have updated the two h3 and /h3 in the code.

3 Now on your main product template, find where your product description is being outputted.
My theme has it in 'product-template.liquid' under SECTIONS (not TEMPLATES, follow the trail)
Find your {{ product.description }} or whatever code which outputs the description (look for the right class, do some testing).
Replace THAT with the below liquid coding for Includes:

{% include 'tabbed-accordion-description' %}

  • I only want to show these accordions when on mobile, so I have put this additional HTML around + CSS to style responsively.
    As below if you wish to use similiar
{% include 'tabbed-accordion-description' %}

.desktop-only { display: block; }
.mobile-only { display: none; }

@media screen and (max-width:768px) {
.desktop-only { display: none; }
.mobile-only { display: block; }
}

This worked for me on a new Shopify theme. Hope that helps

@BlackDragon24

This comment has been minimized.

Copy link

@BlackDragon24 BlackDragon24 commented Jul 14, 2019

This is awesome, do you know how to keep the first accordion open?

@stewartknapman

This comment has been minimized.

Copy link
Owner Author

@stewartknapman stewartknapman commented Jul 14, 2019

@davethai It's not setup to have one opened by default, but if you add the following at the end of the JS it should work.
Keep in mind this suggestion is not tested.

$(function () {
  var openSectionId = 'XXX'; // The ID of the section that you want to be open first.
  $('[href="#'+openSectionId+'"]').click();
});
@jjp2133

This comment has been minimized.

Copy link

@jjp2133 jjp2133 commented Aug 6, 2019

Is there a way to change the + to a - when the accordion's are open vs close?
Right now it only shows + because of < span> + < /span> but I am having a hard time making it into a - when the accordion is open and a + when it is closed.

I also want to have my first accordion open, but the code for the JS makes all accordions open, even with the href. Is it because the href is coded for all Heading Handles?

Thank you in advance!

@davethai It's not setup to have one opened by default, but if you add the following at the end of the JS it should work.
Keep in mind this suggestion is not tested.

$(function () {
  var openSectionId = 'XXX'; // The ID of the section that you want to be open first.
  $('[href="#'+openSectionId+'"]').click();
});
@stewartknapman

This comment has been minimized.

Copy link
Owner Author

@stewartknapman stewartknapman commented Aug 7, 2019

@jjp2133 here is a newer version that has more functionality that probably gives you what you want: https://gist.github.com/stewartknapman/ff9f52b97fab157285b2aa94903a7e9b

@yeehailey

This comment has been minimized.

Copy link

@yeehailey yeehailey commented Aug 3, 2020

Currently, all the tabs are closed. How to show the first tab by default? Thanks!

@duncanbirtwistle

This comment has been minimized.

Copy link

@duncanbirtwistle duncanbirtwistle commented Jan 23, 2021

Great solution and instructions, thank you. A few modifications to customise here.

@natashajoann

This comment has been minimized.

Copy link

@natashajoann natashajoann commented Mar 8, 2021

Hey! This works great but is there a way of having the "+" change to a "-"?

@natashajoann

This comment has been minimized.

Copy link

@natashajoann natashajoann commented Mar 8, 2021

Hey! This works great but is there a way of having the "+" change to a "-"?

Actually managed to figure this one out. I added a class of "accordion" to the

and added this to the JS before the </script> tag:

$(document).ready(function() {

  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";
    }
  });
}

});

Then I removed the elements from the html and added this to the CSS instead:

.accordian a{
width:100%;
}

.accordian h5:after {
content: '\002B';
}

.active:after {
content: "\2212" !important;
color: blue;
}

@jschuler00

This comment has been minimized.

Copy link

@jschuler00 jschuler00 commented Mar 17, 2021

I would like to change the + to a - click any one have code that works?

I tried natashas above and it didn't work for me.

@natashajoann

This comment has been minimized.

Copy link

@natashajoann natashajoann commented Mar 18, 2021

Hey! This works great but is there a way of having the "+" change to a "-"?

Actually managed to figure this one out. I added a class of "accordion" to the

and added this to the JS before the </script> tag:

$(document).ready(function() {

  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";
    }
  });
}

});

Then I removed the elements from the html and added this to the CSS instead:

.accordian a{
width:100%;
}

.accordian h5:after {
content: '\002B';
}

.active:after {
content: "\2212" !important;
color: blue;
}

To clarify, I added "accordion" to the

element:

@prixxxde

This comment has been minimized.

Copy link

@prixxxde prixxxde commented Mar 30, 2021

Watch fork for change + to - while open.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment