Accordion Content Widget

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

• Accordion code
• Installation
• Content creator

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">&#9660;</small>Description</a></dt>
 <dd>Some description text in here.</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Sizing &amp; Fit</a></dt>
 <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Care &amp; Maintenance</a></dt>
 <dd>Dry Clean only.</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Shipping Information</a></dt>
 <dd>Free International Shipping</dd>
</dl>

Closed Accordion

<dl class="accordion">
 <dt><a href="#"><small class="right">&#9668;</small>Description</a></dt>
 <dd>Some description text in here.</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Sizing &amp; Fit</a></dt>
 <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Care &amp; Maintenance</a></dt>
 <dd>Dry Clean only.</dd>

 <dt><a href="#"><small class="right">&#9668;</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.