Articles in this section

See more

Accordion Content Widget

Advanced Customization

Please note that this tutorial is considered an advanced customization and is not supported by Out of the Sandbox. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality.

  • Last updated:
  • Updated
Follow

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 Responsive, Parallax, Mobilia & Retina. No changes to "app.js.liquid" file are required with these themes. Implementing the Accordion feature for the Turbo and Artisan theme will require an addition to the "app.js.liquid" file, as described below.

In the latest versions of our themes, the code provided below has already been implemented, therefore, you can skip this process. For older themes, please head into your "app.js" file located in Online Store > Themes > Actions > Edit Code > Assets.

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('&#9668;');
     $(this).find('small.right').html('&#9660;');
    $(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('&#9660;');
    $(this).parent().next().slideDown();
    } else if($(this).parent().next().is(":visible")){
      $(this).parent().next().slideUp();
      $(this).parent().next('.accordion small.right').html('&#9668;');
      $(this).next('small.right').html('&#9668;');
      if($(this).find('small.right').html('&#9660;')) {
        $(this).find('small.right').html('&#9668;');
      } else if($(this).find('small.right').html('&#9668;')) {
        $(this).find('small.right').html('&#9660;');
      }
    }
        return false;
  });

 

To create Accordions with the click of a button, please have a look at our Content Creator.

 

Related articles