Here is a step-by-step guide on how to install an accordion jQuery widget to create a collapsible panel on any Shopify page.
Having collapsible areas are useful for adding lots of text to a single page and making it easier for visitors to find the information that they want quickly.
This tutorial will follow how I created this page. By the end, you will be able to install accordions on Shopify product pages, store pages, legal pages (policies) and blog posts.
I adapted HTML, CSS and JavaScript codes written by Brenden Palmer, which were chosen because they allow you to create an unlimited number of nested collapsible elements using ul tags.
Here are the steps:
1. Check that jQuery is enabled on your Shopify theme.
My Shopify website has the Masonry theme installed, which already uses jQuery.
If your theme does not have jQuery, go to:
Admin → Online Store → Themes → Actions → Edit code → Layout folder → open theme.liquid
Between the <head> and </head> tags, copy and paste this line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer=”defer”></script>
2. Insert the accordion JavaScript code.
On the same Edit code page, click on Assets folder → Add a new asset
In the window, select Create a blank file → type “jquery.accordion” → select .js → Add asset
Open the new jquery.accordion.js file and paste the accordion JavaScript code:
$(".toggle").click(function(e) { e.preventDefault(); var $this = $(this); if ($this.next().hasClass("show")) { $this.next().removeClass("show"); $this.next().slideUp(350); } else { $this .parent() .parent() .find("li .inner") .removeClass("show"); $this .parent() .parent() .find("li .inner") .slideUp(350); $this.next().toggleClass("show"); $this.next().slideToggle(350); } });
3. Go back to theme.liquid.
Back in the theme.liquid file, paste this line between the <body …> and </body> tags:
{{ 'jquery.accordion.js' | asset_url | script_tag }}(Do not change asset_url or script_tag.)
4. Insert accordion CSS.
On the Edit code page, go to Assets folder → open styles.scss.liquid
Insert this code into styles.scss.liquid:
ul { list-style: none; padding: 0; .inner { padding-left: 1em; overflow: hidden; display: none; &.show { /*display: block;*/ } } li { margin: .5em 0; a.toggle { width: 100%; display: block; background: rgba(0,0,0,0.78); color: #fefefe; padding: .75em; border-radius: 0.15em; transition: background .3s ease; &:hover { background: rgba(0, 0, 0, 0.9); } } } }
You will have noticed that this accordion code uses ul & li tags (unordered lists, i.e. bullet points).
If your shop already uses unordered lists e.g. in your product descriptions or blog posts, you will need to separate the styling for regular unordered lists and accordion unordered lists.
For example, my theme originally had the following code, which gave all unordered lists on my website solid circle bullets:
ul li {
list-style: disc;
}
However, simply inserting the accordion CSS underneath caused the collapsible headers in my accordion to also have bullet points, which I did not want:
And simply removing the original ul li { … } code removed all bullet points from the website, which I also did not want:
5. Separate accordion ul and normal ul CSS
To fix this, I created a new class of ul, .text ul, to apply separate visual styles for normal unordered lists.
In other words, accordion will use CSS styles defined inside ul { … }, and normal lists will be styled by .text ul { … }.
The final code is below.
* The catch is, normal bullet lists must now be tagged as the new .text ul class inside each page’s HTML using <div class="text"> … </div>. This will be done in the next step.
My final CSS code in styles.scss.liquid is:
.text ul { list-style: disc; } ul { list-style: none; padding: 0; .inner { padding-left: 1em; overflow: hidden; display: none; &.show { /*display: block;*/ } } li { margin: .5em 0; a.toggle { width: 100%; display: block; background: rgba(0,0,0,0.78); color: #fefefe; padding: .75em; border-radius: 0.15em; transition: background .3s ease; &:hover { background: rgba(0, 0, 0, 0.9); } } } }
You can come back to this code to change how your collapsible element looks.
6. Edit HTML for any normal bullet lists on your website.
For any normal bulleted lists existing on your website, or any that you will create in the future, their <ul> tags must now be wrapped with <div class="text"> … </div> tags.
This is how I edited the normal bullet list on my product page:
Go to Products → all products → select Product → inside the Content editor, click on Show HTML (the <> button on the right)
Find the <ul> tags and add <div class="text"> … </div> tags around the normal bullet list, as such:
<div class="text"> <ul> <li>Control blood sugar level</li> <li>Prevent diabetes complications</li> <li>Control blood cholesterol</li> <li>Aids digestion</li> <li>Protect your kidney, liver, brain and heart from oxidative damage caused by high glucose toxicity</li> </ul> </div>
And the solid bullet points are back:
7. Insert collapsible elements to Shopify page with HTML
The previous steps were done to basically set up and enable the accordion function on your website. Now, you can add accordions to where you want to put them on your website. It can be placed in product pages, store pages, legal pages (policies) and blog posts, all using the same steps:
Go to Page/Product page/Legal/Blog posts → Show HTML
Insert the accordion HTML code. The basic structure is:
<ul class="accordion"> <li> <a class="toggle" href="javascript:void(0);">Collapsible Header 1</a> <ul class="inner"> <li>Paragraph 1</li> <li>Paragraph 2</li> <li>Paragraph 3</li> </ul> </li> </ul>
You can also add more headers, or even collapsible elements inside another collapsible element (nests), such as in this page. The HTML code of this page is:
<ul class="accordion"> <li> <a class="toggle" href="javascript:void(0);">HONG KONG</a> <ul class="inner"> <li>Flat rate of $35 HKD to all addresses.</li> <li>Free shipping for orders of $500 HKD and above.</li> <li>Paragraph 3</li> </ul> </li> <p>Hong Kong orders will be delivered by SF Express. Generally, items will arrive within 3 working days after placing an order.</p> <li> <a class="toggle" href="javascript:void(0);">Collapsible Header 2</a> <ul class="inner"> <li> <a href="#" class="toggle">Nested Collapsible 1</a> <div class="inner"> <p>Nested Paragraph 4</p> </div> </li> <li> <a href="#" class="toggle"> Nested Collapsible 2</a> <div class="inner"> <p>Nested Paragraph 5</p> </div> </li> <li>Paragraph 6</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Collapsible Header 3</a> <ul class="inner"> <li> <a href="#" class="toggle"> Nested Collapsible 3</a> <ul class="inner"> <li> <a href="#" class="toggle">Nested-Nested Collapsible 1</a> <div class="inner"> <p>Nested-Nested Paragraph 1</p> <p>Nested-Nested Paragraph 2</p> </div> </li> </ul> </li> <li>Paragraph 7</li> <li>Paragraph 8</li> </ul> </li> </ul>
You can play around with the tag structures and edit the code to suit your needs.
And there you have it!
I’m writing this tutorial as I’m learning coding myself, so please feel free to leave better solutions and suggestions if you have any. Hope this helped!
Notes:
As this accordion CSS only utilizes the ul tag and not ol or dl (other types of lists e.g. numbered lists), you do not need to edit the ol and dl code on your theme CSS.
Sources:
[1] A simple jQuery Accordion with unlimited nesting by Brenden Palmer. https://codepen.io/brenden/pen/Kwbpyj
Author: Yoon Ji Kwon