Supported Versions
The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.
In This Article
Adding an Accordion
If you are looking to add an Accordion Widget to your theme as shown in our theme demo, please head into your page's description box while in HTML mode "<>", here, you can copy and paste the following code:
Open Accordion
<dl class="accordion"> <dt><a href="#"><small class="right">▼</small>Description</a></dt> <dd>Some description text in here.</dd> <dt><a href="#"><small class="right">◄</small>Sizing & Fit</a></dt> <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd> <dt><a href="#"><small class="right">◄</small>Care & Maintenance</a></dt> <dd>Dry Clean only.</dd> <dt><a href="#"><small class="right">◄</small>Shipping Information</a></dt> <dd>Free International Shipping</dd> </dl>
Closed Accordion
<dl class="accordion"> <dt><a href="#"><small class="right">◄</small>Description</a></dt> <dd>Some description text in here.</dd> <dt><a href="#"><small class="right">◄</small>Sizing & Fit</a></dt> <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd> <dt><a href="#"><small class="right">◄</small>Care & Maintenance</a></dt> <dd>Dry Clean only.</dd> <dt><a href="#"><small class="right">◄</small>Shipping Information</a></dt> <dd>Free International Shipping</dd> </dl>
Installation
The Accordion feature is immediately compatible with the latest versions of Turbo, Flex, Responsive, Parallax, Retina, and Mobilia No changes to "app.js.liquid" file are required with these themes.
Implementing the Accordion feature for the Artisan theme and previous versions of Turbo (versions before 6.0.3) and Flex (versions before 2.0.5) will require an addition to the "app.js.liquid" file, as described below:
Search for this line of code in your app.js.liquid file (use Command+F/CTRL+F):
$(function() {
The code options provided below will need to be added after this!
Options
You can then copy and paste the code provided depending on how you would like to handle your Accordions:
Open Accordion
var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { if(!$(this).parent().next().is(":visible")) { allPanels.slideUp(); $('.accordion small.right').html('◄'); $(this).find('small.right').html('▼'); $(this).parent().next().slideDown(); } return false; }); $($('.accordion dd')[0]).show();
Closed Accordion
var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { if(!$(this).parent().next().is(":visible")) { $(this).find('small.right').html('▼'); $(this).parent().next().slideDown(); } else if($(this).parent().next().is(":visible")){ $(this).parent().next().slideUp(); $(this).parent().next('.accordion small.right').html('◄'); $(this).next('small.right').html('◄'); if($(this).find('small.right').html('▼')) { $(this).find('small.right').html('◄'); } else if($(this).find('small.right').html('◄')) { $(this).find('small.right').html('▼'); } } return false; });
Content creator
To create Accordions with the click of a button, please have a look at our Content Creator.