The cookie settings on this website are set to 'allow all cookies' to give you the very best experience. Please click Accept Cookies to continue to use the site.

Use Foundation Accordion in BigCommerce Stencil Themes

BigCommerce themes built with stencil using foundation CSS framework. By default, accordion CSS & JS is not enabled. To use this feature in your custom themes or default theme Cornerstone, you will need a little tweak. 

This tutorial will instruct you step by step how to integrate CSS accordion into your stencil theme.

Step 1: Add Foundation Accordion Javascript into your theme

Edit file /assets/js/theme/global.js, add the code below:

import 'foundation-sites/js/foundation/foundation.accordion';

Add JS Accordion - 1

Add the code below:

        accordion: {
            content_class : 'accordion-content',
            active_class: 'is-open',
        },

Add JS Accordion - 2

Step 2: Insert Accordion HTML markup to your html template file

You can create accordion use this HTML markup code blow:

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a" class="accordion-title">Accordion 1</a>
    <div id="panel1a" class="accordion-content is-open">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a" class="accordion-title">Accordion 2</a>
    <div id="panel2a" class="accordion-content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a" class="accordion-title">Accordion 3</a>
    <div id="panel3a" class="accordion-content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

Note that the code is slightly different from the original Foundation code. Now you can test you theme with accordion tab feature enabled.

1st Jul 2017 Papathemes

Latest from our blog...

Show More