Basic accordion for Shopify product

product.liquid

{% 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>

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?

@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

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

@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();
});

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

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

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

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

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

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

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.

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:

Watch fork for change + to - while open.

Uncaught ReferenceError: $ is not defined
at ?oseid=VDdgWAsfb4QK8KkUErCEktbF:1234

` $(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;
    console.log('hello');
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  });
}

}); `