Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section class="container">
    <header class="header">
        <h1 class="vh">Badger Accordion</h1>
        
        
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.5 458.89" role="img" aria-describedby="page-title" class="logo landmark">
    <title id="page-title">Badger Accordion Logo</title>
                        <path fill="#231f20" d="M136.51 38.6l10.47-7c4.59-3.06 11.05-4.34 15.08 1.7a8.18 8.18 0 0 1 .58 8.13 10.06 10.06 0 0 1 9.78 4.16c3.75 5.61 1.13 11.9-4 15.32l-11.77 7.86zm19.09 4.83c2.12-1.42 3.67-3.53 1.69-6.5-1.57-2.35-4.38-2.21-7-.48l-5.13 3.42 4.85 7.26zm9.46 12.27c2.8-1.87 3.52-4.3 1.63-7.14-1.44-2.16-4.46-2.79-7.3-.9l-6.22 4.15 5.46 8.19zm18.07-42.93l4.56-1.77 26.41 28.82-6.58 2.5-5.41-6.38-13.18 5 .16 8.38-6.65 2.52zm14.93 18.75l-9.22-10.67L189 35zM219 2L229.41.81c12.26-1.43 19.51 4.4 20.87 16.1 1.31 11.22-4.61 18.53-16.72 19.94l-10.4 1.22zm13.28 29c8-.93 12.59-4.6 11.54-13.6-1-8.54-4.9-11.66-13.77-10.62l-3.88.45 2.82 24.15zm28.92-14.51C262.49 6.64 269.1-1.35 281 .2a16.51 16.51 0 0 1 14.33 12.4l-6 1.64c-1-5.1-4.49-7.79-9.08-8.39-7.61-1-11.68 4.56-12.55 11.23-.94 7.15 1.58 13.42 9.3 14.42a10 10 0 0 0 11.23-7.64L280 22.78l.68-5.22 14.44 1.89-2.59 19.45-5.12-.67.11-5.14c-2.38 3.14-6.59 4.81-11.38 4.19-11.84-1.56-16.28-10.92-14.99-20.8zm55.25-8l22.47 8.81-2.19 5.57-16.39-6.43-3.4 8.56 15.27 6-2.21 5.54-15.28-6-3.28 8.37 16.4 6.43-2.25 5.74-22.47-8.81zm38.39 17.28l9.76 6.53c5.64 3.77 8.28 10.2 4.5 15.86a10 10 0 0 1-11.15 3.91l-.62 19.08-6.26-4.15 1.23-17.9-3.63-2.42L340 59.61 334.59 56zm1.66 19.7c3 1.8 5.67 1.45 7.18-.81 1.67-2.5.82-5.42-2.28-7.49l-4.4-2.89-5.35 8zM255.25 62.71c-75 0-136 61-136 136s61 136 136 136.05 136-61 136-136-60.99-136.05-136-136.05zm59.69 168.62a7.59 7.59 0 1 1-7.59 7.59 7.59 7.59 0 0 1 7.59-7.59zm-119.38 0a7.59 7.59 0 1 1-7.59 7.59 7.59 7.59 0 0 1 7.59-7.59zM169 294a128.42 128.42 0 0 1-28.59-153c19.33 23.78 43.91 71.71 28.59 153zm86.3 33.34a127.88 127.88 0 0 1-69.48-20.43c13.73-19.4 63.52-102.05 18.07-226a128.52 128.52 0 0 1 102.82 0c-45.45 124 4.34 206.65 18.07 226.05a127.88 127.88 0 0 1-69.53 20.4zM341.55 294c-15.37-81.31 9.21-129.24 28.59-153a128.42 128.42 0 0 1-28.59 153zm-54 9l-2.33-18.8a5.7 5.7 0 0 0-4.16-4.79l-24.37-6.54a5.78 5.78 0 0 0-2.94 0l-24.37 6.54a5.7 5.7 0 0 0-4.16 4.79l-2.33 18.8a5.65 5.65 0 0 0 .57 3.26c1 1.88 7 11.25 31.76 11.32s30.81-9.44 31.76-11.32a5.65 5.65 0 0 0 .6-3.2zM59.33 313.83c-1.56 2-3.1 4.09-4.62 6.17q1.83 3 3.74 5.95a332.63 332.63 0 0 1 20.73-29.11c-.7-1.24-1.39-2.48-2.06-3.74a280.24 280.24 0 0 1-35.21 2.67q1.53 3.38 3.15 6.66c2.53-.23 5.06-.48 7.58-.77q3.18 6.24 6.69 12.17zm11.32-14.5q-4.12 4.92-8.1 10-2.32-4-4.49-8.18 6.33-.76 12.59-1.82zm32.73 61.87c-4.27 2.11-7.65 1.33-10.77-1.71-5.22-5.12-3.62-10.9 1.16-15.33 4.49-4.17 10-5.46 14.6-1 2.84 2.78 4 6.09 2 10.1 1.79.62 3.58 1.22 5.37 1.78 2.09-6.29.79-11.79-3.42-15.88-6.89-6.78-15.8-5.14-22.62.82s-9.25 15.39-1 23.49c5 4.83 11.36 5.95 17.34 3q-1.37-2.62-2.66-5.27zm37.83 33.92c-6.27-3.42-6.17-9.29-2.7-14.8 3.25-5.17 8.21-7.94 13.72-4.94 3.41 1.85 5.37 4.68 4.44 9 1.87.11 3.73.19 5.59.25.43-6.55-2.19-11.43-7.24-14.16-8.28-4.52-16.38-.45-21.42 7.06s-5 17 4.86 22.44c5.95 3.21 12.36 2.55 17.34-1.9q-2-2.13-3.85-4.29c-3.57 3.22-6.95 3.36-10.74 1.34zm62-6c-9.16-2.3-15.88 3.69-18.84 12.14s-.67 17.61 10.25 20.36 17.49-4.4 19.07-13.1-1.28-17.19-10.45-19.42zm4.65 18.28c-1.29 6-5 10.88-11.92 9.19s-7.74-7.73-5.89-13.6 5.7-10.36 11.82-8.82 7.31 7.18 6.02 13.21zm50.32 6.53a8.61 8.61 0 0 0 5.81-8.65c-.3-6.1-5-9.38-10.43-9.43-3.12 0-6.25-.11-9.37-.26q-.87 16.31-1.75 32.6c2 .1 4 .18 6 .23l.39-14c1.27 0 2.54.06 3.81.07q3.82 7 8.13 13.93 3.46-.07 6.93-.25-5-7.03-9.49-14.26zm-4.18-4.2c-1.64 0-3.27 0-4.91-.08l.24-8.65c1.43 0 2.85.06 4.27.07 3 0 5 1.73 5 4.43.08 2.44-1.6 4.1-4.6 4.23zm71-8c-3.47-10.08-10.3-14-19.79-11.74q-4.1 1-8.22 1.78l6.71 31.95q4.77-.93 9.5-2.05c11.03-2.67 15.06-10.31 11.8-19.9zm-13.69 14.85l-2.93.67q-2.52-10.65-5.05-21.3l3.12-.72c7.09-1.71 10.77.46 13.08 7.88 2.38 7.83-1.18 11.89-8.27 13.51zm42.46-44.75l15.83 28.75c1.79-.94 3.56-1.91 5.33-2.91l-16.57-28.34c-1.57.89-3.1 1.73-4.64 2.54zM421 339.47c-6.8-5.91-15.69-7.55-22.6-.71s-5.35 15.57.42 22.49 15 9.74 23.31 1.68 5.6-17.64-1.13-23.46zm-2.54 19.72c-5.24 5.1-10.93 2.7-15.06-1.92s-6-10.23-1.31-14.76 10.22-2.69 14.78 1.54 6.78 9.95 1.57 15.14zm16.85-70.26l20.24 10.8a213.82 213.82 0 0 1-26.67.91c-.95 1.61-1.93 3.2-2.92 4.76l27.43 18.08c1.11-1.76 2.21-3.54 3.28-5.35L437.1 306a218.45 218.45 0 0 0 27-1.38c1-2 2-4 2.95-6l-29.32-14.63q-1.2 2.47-2.44 4.94zm72.51-12.59l-20.75-8.8a22.23 22.23 0 0 0-40.93-17.38l-20.73-8.8a4.44 4.44 0 0 0-5.81 2.35l-4.46 10.5a4.44 4.44 0 0 0 2.35 5.81l5.68 2.41a148.4 148.4 0 0 1-16.74 16.28 3.45 3.45 0 0 0-1.23 2.24 177.67 177.67 0 0 1-5.08 24.72 149.67 149.67 0 0 1-21.71 10.78 3.51 3.51 0 0 0-1.94 1.9 163.8 163.8 0 0 1-10.79 21.2 161.39 161.39 0 0 1-23.36 4 3.49 3.49 0 0 0-2.41 1.32 165.5 165.5 0 0 1-15.64 17.24 172.9 172.9 0 0 1-23.49-2.11 3.45 3.45 0 0 0-2.67.66 171.65 171.65 0 0 1-19.48 12.78 177.13 177.13 0 0 1-22.14-7.74 3.55 3.55 0 0 0-2.75 0 176.57 176.57 0 0 1-22.14 7.74 172.42 172.42 0 0 1-19.47-12.78 3.51 3.51 0 0 0-2.68-.66 172.61 172.61 0 0 1-23.45 2.14 166.52 166.52 0 0 1-15.63-17.24 3.49 3.49 0 0 0-2.42-1.32 161.49 161.49 0 0 1-23.35-4 164.45 164.45 0 0 1-10.79-21.2 3.54 3.54 0 0 0-1.94-1.9 150.19 150.19 0 0 1-21.71-10.78 177.67 177.67 0 0 1-5.1-24.7 3.47 3.47 0 0 0-1.24-2.24 148.65 148.65 0 0 1-16.66-16.2L93 260a4.43 4.43 0 0 0 2.34-5.81l-4.45-10.5a4.44 4.44 0 0 0-5.81-2.35l-20.73 8.8a22.23 22.23 0 0 0-40.93 17.38L2.7 276.34a4.44 4.44 0 0 0-2.35 5.81l4.46 10.5a4.42 4.42 0 0 0 5.81 2.35l6-2.55a278 278 0 0 0 6.2 33.29 3.54 3.54 0 0 0 .86 1.56 226.62 226.62 0 0 0 27.24 24.33 247.68 247.68 0 0 0 15.44 32.09 3.48 3.48 0 0 0 1.36 1.33 233.58 233.58 0 0 0 31.78 14.44 247.79 247.79 0 0 0 22.65 25.76 3.61 3.61 0 0 0 1.7.93 253.68 253.68 0 0 0 34 5.19 256.66 256.66 0 0 0 28.24 18.89 3.48 3.48 0 0 0 1.75.47h.16a268.59 268.59 0 0 0 34.06-3.43 268.46 268.46 0 0 0 32.09 11.45 3.55 3.55 0 0 0 1 .14 3.48 3.48 0 0 0 1-.14 268.61 268.61 0 0 0 32.1-11.45 266.77 266.77 0 0 0 34.06 3.43h.13a3.51 3.51 0 0 0 1.75-.47 258.56 258.56 0 0 0 28.24-18.89 252.57 252.57 0 0 0 34-5.19 3.53 3.53 0 0 0 1.69-.93 246.62 246.62 0 0 0 22.65-25.76 233.15 233.15 0 0 0 31.79-14.44 3.45 3.45 0 0 0 1.35-1.33 249.05 249.05 0 0 0 15.45-32.09 225.86 225.86 0 0 0 27.24-24.33 3.64 3.64 0 0 0 .86-1.56 279.78 279.78 0 0 0 6.22-33.4l6.26 2.66a4.42 4.42 0 0 0 5.81-2.35l4.46-10.5a4.44 4.44 0 0 0-2.41-5.81zM473 243.82a16.34 16.34 0 0 1 8.65 21.41l-30.05-12.76a16.35 16.35 0 0 1 21.4-8.65zm-435.42 0a16.35 16.35 0 0 1 21.4 8.65l-30 12.76a16.34 16.34 0 0 1 8.56-21.41zm-8.13 79.32a270.22 270.22 0 0 1-6.07-33.54l28.74-12.2L80.86 266a156.22 156.22 0 0 0 17.45 17.27 184.57 184.57 0 0 0 4.82 23.42L53.8 345a217.93 217.93 0 0 1-24.39-21.86zm28.64 27.45l49.34-38.4a157.38 157.38 0 0 0 20.51 10.22 173.83 173.83 0 0 0 10.2 20l-37.65 50a226.24 226.24 0 0 1-28.48-13 241.42 241.42 0 0 1-13.96-28.82zm48 46l37.64-50a168.91 168.91 0 0 0 22.05 3.83 173.15 173.15 0 0 0 14.69 16.18l-23.53 57.7a244.51 244.51 0 0 1-30.55-4.71 238.25 238.25 0 0 1-20.31-23.05zm57.37 30.28L187 369.14a180.71 180.71 0 0 0 22.11-2 180.16 180.16 0 0 0 18.27 12l-8 61.52a260.65 260.65 0 0 1-30.62 3 250 250 0 0 1-25.31-16.84zm91.67 24.92a260.19 260.19 0 0 1-28.81-10.23l8-61.52a183.92 183.92 0 0 0 20.81-7.25 183.92 183.92 0 0 0 20.8 7.21l8 61.52a260 260 0 0 1-28.81 10.22zm66.37-8.05a260.65 260.65 0 0 1-30.62-3l-8-61.52a180.31 180.31 0 0 0 18.28-12 180.71 180.71 0 0 0 22.11 2l23.53 57.69a252.14 252.14 0 0 1-25.31 16.78zm62.36-24.13a244.64 244.64 0 0 1-30.54 4.71l-23.54-57.7a171.88 171.88 0 0 0 14.7-16.18 168.77 168.77 0 0 0 22-3.83l12.92 17.15 24.73 32.83a239.4 239.4 0 0 1-20.28 22.97zm54.42-40.18a225.72 225.72 0 0 1-28.49 13l-37.65-50a170.68 170.68 0 0 0 10.2-20 157.38 157.38 0 0 0 20.51-10.22l49.35 38.4a243 243 0 0 1-13.93 28.77zm42.56-56.24a220.82 220.82 0 0 1-24.4 21.81l-49.34-38.36a184.6 184.6 0 0 0 4.83-23.42A157.07 157.07 0 0 0 429.38 266l33 13.12 24.56 10.42a272 272 0 0 1-6.11 33.6z"></path>
</svg>


        <p>An accessible light weight, vanilla JavaScript accordion with an extensible API. Just 8.61kb and Gzipped 2.59kb! Checkout the links below for more info.</p>
      
        <ul class="inline-list">
          <li class="inline-list__item">
              <a class="icon-link" href="https://ba.northernbadger.co.uk" rel="noopener nofollow" target="_blank">
                  <span class="icon-link__text">
                      Demo site
                  </span>
              </a>
          </li>  
          <li class="inline-list__item">
            <a href="https://github.com/stuartjnelson/badger-accordion" class="icon-link" rel="noopener nofollow" target="_blank">
              <span class="vh">Link to github</span>
              <span class="icon-link__text">
                  Repo & docs
              </span>
              <svg aria-hidden="true" height="32" viewBox="0 0 16 16" width="32">
                <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
                </path>
              </svg>
            </a>
          </li>
        </ul>
    </header>

    <dl class="badger-accordion js-badger-accordion">
        <dt class="badger-accordion__header">
            <button class="badger-accordion__trigger js-badger-accordion-header">
                <div class="badger-accordion__trigger-title">
                    European Badgers - Meles meles
                </div>
                <div class="badger-accordion__trigger-icon">
                </div>
            </button>
        </dt>
        <dd class="badger-accordion__panel js-badger-accordion-panel">
            <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">
                <p>Badgers are short-legged omnivores in the family Mustelidae, which also includes otters, polecats, weasels and wolverines. They belong to the caniform suborder of carnivoran mammals.</p>
                <p>Badgers are thought to have got their name because of the white mark – or badge – on their head, although there are other theories.</p>
                <p>Another old name for badgers is ‘brock’, meaning grey. You can often see the word brock in street names. Brock is also the name of a character in the Pokemon TV series!</p>
                <p>Badgers are fast – they can run up to 30km per hour (nearly 20 mph) for short periods.</p>
            </div>
        </dd>
        <dt class="badger-accordion__header">
            <button class="badger-accordion__trigger js-badger-accordion-header">
                <div class="badger-accordion__trigger-title">
                    Honey Badger - Mellivora capensis
                </div>
                <div class="badger-accordion__trigger-icon">
                </div>
            </button>
        </dt>
        <dd class="badger-accordion__panel js-badger-accordion-panel">
            <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">
                <p>Honey badgers can reach 2.4 feet in length and weigh between 19 and 26 pounds. They have bushy tail that is usually 12 inches long.</p>
                <p>Honey badger has incredible thick skin that cannot be pierced with arrows, spears or even machete. Skin is also very loose, which is useful in the case of attack. When predator grabs a badger, animal rotates in its skin and turns toward predator's face to fight back (attacking its eyes).</p>
                <p>Honey badger has very sharp teeth. They can easily break tortoise shell.</p>
            </div>
        </dd>
        <dt class="badger-accordion__header">
            <button class="badger-accordion__trigger js-badger-accordion-header">
                <div class="badger-accordion__trigger-title">
                    Hog Badger - Arctonyx collaris
                </div>
                <div class="badger-accordion__trigger-icon">
                </div>
            </button>
        </dt>
        <dd class="badger-accordion__panel js-badger-accordion-panel">
            <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">
                <p>Although badgers are a solitary animal the young Hog Badger tends to be quite playful and social.  I would be careful playing with any animal that has extremely large claws.  Remember folks, it is all fun and games until someone loses an eye.</p>
                <p>Hog Badgers are omnivores and they feed on a variety of things from honey and fruit to insects and small mammals. </p>
                <p>A young / baby of a hog badger is called a 'kit'. The females are called 'sow' and males 'boar'. A hog badger group is called a 'cete, colony, set or company'.</p>
            </div>
        </dd>
    </dl>
</section>
            
          
!
            
              // ==========================================
//   RESET
// ==========================================

dl,
dt,
dd { margin: 0; }




// ==========================================================================
// # VARIABLES
// ==========================================================================

// COLORS
$white: #fff;
$off-white: #fafafa;
$black: #323232;
$grey: #6C7A89;
$grey-light: #95A5A6;
$blue: #2574A9;
$dark-blue: #34495e;
$green: #16a085;

// UNITS
$spacing-unit: 40px;
$half-spacing-unit: $spacing-unit / 2;

// BORDER
$accordion-border: solid 2px $grey-light;

// ANIMATION
$transition-time: 0.2s;

@mixin base-trans {
    transition: all ease-in-out $transition-time;
}

// LINKS
@mixin link-underline($color: currentColor, $size: -2px) {
    box-shadow: inset 0 $size $color;
}

@mixin active-link() {
    color: $blue;
        
    .icon-link__text { @include link-underline($blue, -3px); }
        
    svg { fill: $blue; }
}





// ==========================================================================
// # BASE
// ==========================================================================

html {
    color: $black;
    font-family: 'Josefin Sans', Arial;
    font-size: 16px;
    line-height: 1.25;
}

body {
    background: #EFF1F0;
    min-height: 100vh;
}

.vh {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
}

.vh.focusable:active,
.vh.focusable:focus {
    position: static;
    overflow: visible;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
}

.container {
    max-width: 720px;
    margin: 10vh auto 0;
}

@media screen and (max-width: 767px) {
    .container {
        margin: 10vh auto;
        width: 90%;
    }
}

.header {
    display: block;
    margin: 0 auto $spacing-unit * 1.5;
    max-width: 75%;
    text-align: center;
}

button {
    border: 0;
    width: 100%;
    font-size: 1em;
}

p {
    line-height: 1.25;
    margin: $half-spacing-unit 0;
    
    &:last-of-type { margin-bottom: 0; }
}

a { color: $dark-blue; }

.inline-list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-list__item { 
    display: inline-block;
    
    &:not(:last-of-type) { margin-right: $spacing-unit; }
}


.icon-link {
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: $spacing-unit/8;
    text-decoration: none;
    
    &:focus { 
        @include active-link;
        outline: auto 2px $blue;
    }
  
    svg { 
        @include base-trans;
        fill: $dark-blue;
        margin-left: 0.5rem; 
    }
}

@media screen and (min-width: 768px) {
    .icon-link:hover {
        @include active-link;
    }
}

.icon-link__text { 
    @include base-trans;
    @include link-underline;
}
  

.logo {
    display: block;
    margin: 0 auto $spacing-unit;
    max-width: 280px;
}





// ==========================================================================
// # ESSENTIAL STYLES
// ==========================================================================


.badger-accordion__panel {
    max-height: 75vh;
    overflow: hidden;

    // scss-lint:disable ImportantRule
    &.-ba-is-hidden { max-height: 0 !important; }

    // transition is added via `badger-accordion--initialized` to stop animation on initalition
    .badger-accordion--initialized & { transition: max-height ease-in-out 0.2s; }
}





// ==========================================================================
// # DEMO ACCORDION
// ==========================================================================

.badger-accordion {
    box-shadow: 0 1px 10px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.1);
    border-radius: 4px;
    overflow: hidden;
}

.badger-accordion__header {
    &:not(:last-of-type) {
        border-bottom: 1px solid #EFF1F0;
    }
}

.badger-accordion__trigger {
    align-content: space-between;
    align-items: center;
    background-color: $white;
    border: 0;
    border-radius: 0px;
    color: $dark-blue;
    display: flex;
    font-family: 'Josefin Sans', Arial;
    font-size: 1.25rem;
    line-height: 1;
    padding: $half-spacing-unit;
    text-align: left;
    transition: all ease-in-out $transition-time;
    width: 100%;

    &[aria-expanded=true] {
        .badger-accordion__trigger-icon {
            &:before {
                transform: rotate(45deg) translate3d(13px, 14px, 0);
            }

            &:after {
                transform: rotate(-45deg) translate3d(-13px, 14px, 0);
            }
        }
    }

    &:focus,
    &:hover {
        background-color: $green;
        cursor: pointer;
        outline: none;

        .badger-accordion__trigger-title { color: $white; }

        .badger-accordion__trigger-icon {
            &:after,
            &:before {
                background-color: $white;
            }
        }
    }
    
    // Removing "inner outline" for Firefox
    &::-moz-focus-inner {
        border: none;
    }
}


.badger-accordion__trigger-title {
    font-size: 1.2rem;
    transition: ease-in-out 0.3s;
}

.badger-accordion__trigger-icon {
    display: block;
    height: $spacing-unit;
    margin-left: auto;
    position: relative;
    transition: all ease-in-out $transition-time;
    width: $spacing-unit;

    &:after,
    &:before {
        background-color: #333;
        content: "";
        height: 3px;
        position: absolute;
        top: 10px;
        transition: all ease-in-out (($transition-time / 3) * 2);
        width: 30px;
    }

    &:before {
        left: 1px;
        transform: rotate(45deg) translate3d(8px, 22px, 0);
        transform-origin: 100%;
    }

    &:after {
        transform: rotate(-45deg) translate3d(-8px, 22px, 0);
        right: 1px;
        transform-origin: 0;
    }
}

.badger-accordion__panel {
    background-color: $off-white;
    position: relative;

    &:after {
        background-color: #EFF1F0;
        bottom: 0;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        width: 100%;
    }
}

.badger-accordion__panel-inner {
    padding: $half-spacing-unit $half-spacing-unit $spacing-unit;
}


@media screen and (max-width: 767px) {
    .badger-accordion__trigger-icon {
        display: none;
        padding: $half-spacing-unit;
    }
}

            
          
!
            
              function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

if (!Array.from) {
  Array.from = function () {
    var toStr = Object.prototype.toString;

    var isCallable = function isCallable(fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };

    var toInteger = function toInteger(value) {
      var number = Number(value);

      if (isNaN(number)) {
        return 0;
      }

      if (number === 0 || !isFinite(number)) {
        return number;
      }

      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
    };

    var maxSafeInteger = Math.pow(2, 53) - 1;

    var toLength = function toLength(value) {
      var len = toInteger(value);
      return Math.min(Math.max(len, 0), maxSafeInteger);
    }; // The length property of the from method is 1.


    return function from(arrayLike
    /* , mapFn, thisArg */
    ) {
      // 1. Let C be the this value.
      var C = this; // 2. Let items be ToObject(arrayLike).

      var items = Object(arrayLike); // 3. ReturnIfAbrupt(items).

      if (arrayLike == null) {
        throw new TypeError('Array.from requires an array-like object - not null or undefined');
      } // 4. If mapfn is undefined, then let mapping be false.


      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;

      if (typeof mapFn !== 'undefined') {
        // 5. else
        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: when provided, the second argument must be a function');
        } // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.


        if (arguments.length > 2) {
          T = arguments[2];
        }
      } // 10. Let lenValue be Get(items, "length").
      // 11. Let len be ToLength(lenValue).


      var len = toLength(items.length); // 13. If IsConstructor(C) is true, then
      // 13. a. Let A be the result of calling the [[Construct]] internal method
      // of C with an argument list containing the single item len.
      // 14. a. Else, Let A be ArrayCreate(len).

      var A = isCallable(C) ? Object(new C(len)) : new Array(len); // 16. Let k be 0.

      var k = 0; // 17. Repeat, while k < len… (also steps a - h)

      var kValue;

      while (k < len) {
        kValue = items[k];

        if (mapFn) {
          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
        } else {
          A[k] = kValue;
        }

        k += 1;
      } // 18. Let putStatus be Put(A, "length", len, true).


      A.length = len; // 20. Return A.

      return A;
    };
  }();
}

/*
	By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License
*/

/* eslint-disable no-unused-vars */
(function (document, window) {
  var el = document.body || document.documentElement,
      s = el.style,
      prefixAnimation = '',
      prefixTransition = '';
  if (s.WebkitAnimation == '') prefixAnimation = '-webkit-';
  if (s.MozAnimation == '') prefixAnimation = '-moz-';
  if (s.OAnimation == '') prefixAnimation = '-o-';
  if (s.WebkitTransition == '') prefixTransition = '-webkit-';
  if (s.MozTransition == '') prefixTransition = '-moz-';
  if (s.OTransition == '') prefixTransition = '-o-';
  Object.defineProperty(Object.prototype, 'onCSSAnimationEnd', {
    value: function value(callback) {
      var runOnce = function runOnce(e) {
        callback();
        e.target.removeEventListener(e.type, runOnce);
      };

      this.addEventListener('webkitAnimationEnd', runOnce);
      this.addEventListener('mozAnimationEnd', runOnce);
      this.addEventListener('oAnimationEnd', runOnce);
      this.addEventListener('oanimationend', runOnce);
      this.addEventListener('animationend', runOnce);
      if (prefixAnimation == '' && !('animation' in s) || getComputedStyle(this)[prefixAnimation + 'animation-duration'] == '0s') callback();
      return this;
    },
    enumerable: false,
    writable: true
  });
  Object.defineProperty(Object.prototype, 'onCSSTransitionEnd', {
    value: function value(callback) {
      var runOnce = function runOnce(e) {
        callback();
        e.target.removeEventListener(e.type, runOnce);
      };

      this.addEventListener('webkitTransitionEnd', runOnce);
      this.addEventListener('mozTransitionEnd', runOnce);
      this.addEventListener('oTransitionEnd', runOnce);
      this.addEventListener('transitionend', runOnce);
      this.addEventListener('transitionend', runOnce);
      if (prefixTransition == '' && !('transition' in s) || getComputedStyle(this)[prefixTransition + 'transition-duration'] == '0s') callback();
      return this;
    },
    enumerable: false,
    writable: true
  });
})(document, window, 0);

/**
 *  ACCORDION
 *
 * A lightwight vanilla JS accordion with an exstensible API
 */
// import uuid from 'uuid/v4';
// const uuidV4 = uuid;

/* eslint-disable no-unused-vars */
/**
 * CONSTRUCTOR
 * Initializes the object
 */

var BadgerAccordion =
/*#__PURE__*/
function () {
  function BadgerAccordion(el, options) {
    var _this2 = this;

    _classCallCheck(this, BadgerAccordion);

    var container = typeof el === 'string' ? document.querySelector(el) : el; // If el is not defined

    if (container == null) {
      return;
    }

    var defaults = {
      headerClass: '.js-badger-accordion-header',
      panelClass: '.js-badger-accordion-panel',
      panelInnerClass: '.js-badger-accordion-panel-inner',
      hiddenClass: '-ba-is-hidden',
      activeClass: '-ba-is-active',

      get hidenClass() {
        return this.hiddenClass;
      },

      initializedClass: 'badger-accordion--initialized',

      get initalisedClass() {
        return this.initializedClass;
      },

      headerDataAttr: 'data-badger-accordion-header-id',
      openMultiplePanels: false,
      openHeadersOnLoad: [],
      headerOpenLabel: '',
      headerCloseLabel: '',
      roles: true // toggleEl:            // If you want to use a different element to trigger the accordion

    }; // Options

    this.settings = _extends({}, defaults, options); // Setting getting elements

    this.container = container; // Selecting children of the current accordion instance

    var children = Array.from(this.container.children); // Since the Accordions header button is nested inside an element with class
    // of `badger-accordion__header` it is a grandchild of the accordion instance.
    // In order to have nested accordions we need each to only get all the button 
    // elements for this instance. Here an array is created to show all the children
    // of the element `badger-accordion__header`.

    var headerParent = children.filter(function (header) {
      return !header.classList.contains(_this2.settings.panelClass.substr(1));
    }); // Creating an array of all DOM nodes that are Accordion headers

    this.headers = headerParent.reduce(function (acc, header) {
      var _ref;

      // Gets all the elements that have the headerClass
      var a = Array.from(header.children).filter(function (child) {
        return child.classList.contains(_this2.settings.headerClass.substr(1));
      }); // Merges the current `badger-accordion__header` accordion triggers
      // with all the others.

      acc = (_ref = []).concat.apply(_ref, _toConsumableArray(acc).concat([a]));
      return acc;
    }, []); // Creates an array of all panel elements for this instance of the accordion

    this.panels = children.filter(function (panel) {
      return panel.classList.contains(_this2.settings.panelClass.substr(1));
    });
    this.toggleEl = this.settings.toggleEl !== undefined ? Array.from(this.container.querySelectorAll(this.settings.toggleEl)) : this.headers; // This is for managing state of the accordion. It by default sets
    // all accordion panels to be closed

    this.states = [].map.call(this.headers, function () {
      return {
        state: 'closed'
      };
    });
    this.ids = [].map.call(this.headers, function () {
      return {
        id: Math.floor(Math.random() * 1000000 + 1)
      };
    }); // This is to ensure that once an open/close event has been fired
    // another cannot start until the first event has finished.
    // @TODO - get this working...

    this.toggling = false; // Initiating the accordion

    if (this.container) {
      this.init();
    } else {
      /* eslint-disable no-console */
      console.log('Something is wrong with you markup...');
    }
  }
  /**
   *  INIT
   *
   *  Initalises the accordion
   */


  _createClass(BadgerAccordion, [{
    key: "init",
    value: function init() {
      // Sets up ID, aria attrs & data-attrs
      this._setupAttributes(); // Setting up the inital view of the accordion


      this._initalState(); // Setting the height of each panel


      this.calculateAllPanelsHeight(); // Inserting data-attribute onto each `header`

      this._insertDataAttrs(); // Adding listeners to headers


      this._addListeners(); // Adds class to accordion for initalisation


      this._finishInitialization();
    }
    /**
     * CHECK ROLES ETTING
     * @return {[boolean]}
     * Checks roles setting for all roles or a single role.
     * First checks if a `boolean` has been used to set all
     * roles to either true or false. If the setting is an
     * object it will only set the attribute where each
     * attribute has explicitly been set as true, eg;
     * ```
     * roles: {
     *     region: true
     * }
     * ```
     */

  }, {
    key: "_setRole",
    value: function _setRole(role, el) {
      if (typeof this.settings.roles === 'boolean' && this.settings.roles || this.settings.roles[role] !== undefined && this.settings.roles[role] !== false) {
        el.setAttribute('role', role);
      }
    }
    /**
     *  INSERT DATA ATTRS
     *
     *  Updates state object for inital loading of the accordion
     */

  }, {
    key: "_initalState",
    value: function _initalState() {
      // Sets state object as per `this.settings.openHeadersOnLoad`
      var headersToOpen = this.settings.openHeadersOnLoad;

      if (headersToOpen.length) {
        this._openHeadersOnLoad(headersToOpen);
      } // Render DOM as per the updates `this.states` object


      this._renderDom();
    }
    /**
     *  INSERT DATA ATTRS
     *
     *  Adds `headerDataAttr` to all headers
     */

  }, {
    key: "_insertDataAttrs",
    value: function _insertDataAttrs() {
      var _this3 = this;

      this.headers.forEach(function (header, index) {
        header.setAttribute(_this3.settings.headerDataAttr, index);
      });
    }
    /**
     *  FINISH INITALISATION
     *
     *  Adds in `initializedClass` to accordion
     */

  }, {
    key: "_finishInitialization",
    value: function _finishInitialization() {
      this.container.classList.add(this.settings.initializedClass);

      this._setRole('presentation', this.container);
    }
    /**
     *  ADD LISTENERS
     *
     *  Adds click event to each header
     */

  }, {
    key: "_addListeners",
    value: function _addListeners() {
      // So we can reference the badger-accordion object inside out eventListener
      var _this = this; // Adding click event to accordion


      this.headers.forEach(function (header, index) {
        header.addEventListener('click', function () {
          // Getting the target of the click
          // const clickedEl = event.target;
          _this.handleClick(header, index);
        });
      });
    }
    /**
     *  HANDLE CLICK
     *
     *  Handles click and checks if click was on an header element
     *  @param {object} targetHeader - The header node you want to open
     */

  }, {
    key: "handleClick",
    value: function handleClick(targetHeader, headerIndex) {
      // Removing current `.` from `this.settings.headerClass` class so it can
      // be checked against the `targetHeader` classList
      var targetHeaderClass = this.settings.headerClass.substr(1); // Checking that the thing that was clicked on was the accordions header

      if (targetHeader.classList.contains(targetHeaderClass) && this.toggling === false) {
        this.toggling = true; // Updating states

        this.setState(headerIndex); // Render DOM as per the updates `this.states` object

        this._renderDom();
      }
    }
    /**
     *  SET STATES
     *
     *  Sets the state for all headers. The 'target header' will have its state toggeled
     *  @param {object} targetHeaderId - The header node you want to open
     */

  }, {
    key: "setState",
    value: function setState(targetHeaderId) {
      var _this4 = this;

      var states = this.getState(); // If `this.settings.openMultiplePanels` is false we need to ensure only one panel
      // be can open at once. If it is false then all panels state APART from the one that
      // has just been clicked needs to be set to 'closed'.

      if (!this.settings.openMultiplePanels) {
        states.filter(function (state, index) {
          if (index != targetHeaderId) {
            state.state = 'closed';
          }
        });
      } // Toggles the state value of the target header. This was `array.find` but `find`
      // isnt supported in IE11


      states.filter(function (state, index) {
        if (index == targetHeaderId) {
          var newState = _this4.toggleState(state.state);

          return state.state = newState;
        }
      });
    }
    /**
     *  RENDER DOM
     *
     *  Renders the accordion in the DOM using the `this.states` object
     */

  }, {
    key: "_renderDom",
    value: function _renderDom() {
      var _this5 = this;

      // Filter through all open headers and open them
      this.states.filter(function (state, index) {
        if (state.state === 'open') {
          // Opening the current panel but _NOT_ updating the state
          _this5.open(index, false);
        }
      }); // Filter through all closed headers and closes them

      this.states.filter(function (state, index) {
        if (state.state === 'closed') {
          // Closing the current panel but _NOT_ updating the state
          _this5.close(index, false);
        }
      });
    }
    /**
     *  OPEN
     *
     *  Closes a specific panel
     *  @param {integer} headerIndex - The header node index you want to open
     */

  }, {
    key: "open",
    value: function open(headerIndex) {
      var setState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

      // 1. If being fired directly the state needs to be updated.
      if (setState) {
        this.setState(headerIndex);
      }

      this.togglePanel('open', headerIndex);
    }
    /**
     *  CLOSE
     *
     *  Closes a specific panel
     *  @param {integer} headerIndex - The header node index you want to close
     */

  }, {
    key: "close",
    value: function close(headerIndex) {
      var setState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

      // 1. If being fired directly the state needs to be updated.
      if (setState) {
        this.setState(headerIndex);
      }

      this.togglePanel('closed', headerIndex);
    }
    /**
     *  OPEN ALL
     *
     *  Opens all panels
     */

  }, {
    key: "openAll",
    value: function openAll() {
      var _this6 = this;

      this.headers.forEach(function (header, headerIndex) {
        _this6.togglePanel('open', headerIndex);
      });
    }
    /**
     *  CLOSE ALL
     *
     *  Closes all panels
     */

  }, {
    key: "closeAll",
    value: function closeAll() {
      var _this7 = this;

      this.headers.forEach(function (header, headerIndex) {
        _this7.togglePanel('closed', headerIndex);
      });
    }
    /**
     *  GET STATE
     *
     *  Getting state of headers. By default gets state of all headers
     *  @param {string} animationAction - The animation you want to invoke
     *  @param {integer} headerIndex    - The header node index you want to animate
     */

  }, {
    key: "togglePanel",
    value: function togglePanel(animationAction, headerIndex) {
      var _this8 = this;

      if (animationAction !== undefined && headerIndex !== undefined) {
        if (animationAction === 'closed') {
          // 1. Getting ID of panel that we want to close
          var header = this.headers[headerIndex];
          var panelToClose = this.panels[headerIndex]; // 2. Closeing panel

          panelToClose.classList.add(this.settings.hiddenClass); // 3. Removing active classes

          panelToClose.classList.remove(this.settings.activeClass);
          header.classList.remove(this.settings.activeClass); // 4. Set aria attrs

          header.setAttribute('aria-expanded', false); // 5. Resetting toggling so a new event can be fired

          panelToClose.onCSSTransitionEnd(function () {
            return _this8.toggling = false;
          });
        } else if (animationAction === 'open') {
          // 1. Getting ID of panel that we want to open
          var _header = this.headers[headerIndex];
          var panelToOpen = this.panels[headerIndex]; // 2. Opening panel

          panelToOpen.classList.remove(this.settings.hiddenClass); // 3. Adding active classes

          panelToOpen.classList.add(this.settings.activeClass);

          _header.classList.add(this.settings.activeClass); // 4. Set aria attrs


          _header.setAttribute('aria-expanded', true); // 5. Resetting toggling so a new event can be fired


          panelToOpen.onCSSTransitionEnd(function () {
            return _this8.toggling = false;
          });
        }
      }
    } // @TODO - is this needed anymore?
    // checkState(headerId) {
    //     let state = this.states[headerId].state;
    //
    //     if(state === 'closed') {
    //         return state;
    //     } else if(state === 'open') {
    //         return state;
    //     }
    // }

    /**
     *  GET STATE
     *
     *  Getting state of headers. By default gets state of all headers
     *  @param {array} headerIds - Id/'s of the headers you want to check
     */

  }, {
    key: "getState",
    value: function getState() {
      var _this9 = this;

      var headerIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

      if (headerIds.length && Array.isArray(headerIds)) {
        var states = headerIds.map(function (header) {
          return _this9.states[header];
        });
        return states;
      } else {
        return this.states;
      }
    }
    /**
     *  TOGGLE STATE
     *
     *  Toggling the state value
     *  @param {string} currentState - Current state value for a header
     */

  }, {
    key: "toggleState",
    value: function toggleState(currentState) {
      if (currentState !== undefined) {
        return currentState === 'closed' ? 'open' : 'closed';
      }
    }
    /**
     *  HEADERS TO OPEN
     *
     *  Setting which headers should be open when accordion is initalised
     *  @param {array} headersToOpen - Array of ID's for the headers to be open
     */

  }, {
    key: "_openHeadersOnLoad",
    value: function _openHeadersOnLoad() {
      var _this10 = this;

      var headersToOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

      if (headersToOpen.length && Array.isArray(headersToOpen)) {
        var headers = headersToOpen.filter(function (header) {
          return header != undefined;
        });
        headers.forEach(function (header) {
          _this10.setState(header);
        });
      }
    }
    /**
     *  SET UP ATTRIBUTES
     *
     *  Initalises accordion attribute methods
     */

  }, {
    key: "_setupAttributes",
    value: function _setupAttributes() {
      // Adding ID & aria-controls
      this._setupHeaders(); // Adding ID & aria-labelledby


      this._setupPanels(); // Inserting data-attribute onto each `header`


      this._insertDataAttrs();
    }
    /**
     *  SET PANEL HEIGHT - ** DEPRICATED **
     *
     *  Depreicated as this method is becoming public and
     *  I want to name it something that lets devs know
     *  it's not just for using inside the `init()` method.
     */

  }, {
    key: "_setPanelHeight",
    value: function _setPanelHeight() {
      this.calculateAllPanelsHeight();
    }
    /**
     *  CALCULATE PANEL HEIGHT
     *
     *  Setting height for panels using pannels inner element
     */

  }, {
    key: "calculatePanelHeight",
    value: function calculatePanelHeight(panel) {
      var panelInner = panel.querySelector(this.settings.panelInnerClass);
      var activeHeight = panelInner.offsetHeight;
      return panel.style.maxHeight = "".concat(activeHeight, "px");
    }
    /**
     *  CALCULATE PANEL HEIGHT
     *
     *  Setting height for panels using pannels inner element
     */

  }, {
    key: "calculateAllPanelsHeight",
    value: function calculateAllPanelsHeight() {
      var _this11 = this;

      this.panels.forEach(function (panel) {
        _this11.calculatePanelHeight(panel);
      });
    }
    /**
     * SET UP HEADERS
     */

  }, {
    key: "_setupHeaders",
    value: function _setupHeaders() {
      var _this12 = this;

      this.headers.forEach(function (header, index) {
        header.setAttribute('id', "badger-accordion-header-".concat(_this12.ids[index].id));
        header.setAttribute('aria-controls', "badger-accordion-panel-".concat(_this12.ids[index].id));
      });
    }
    /**
     * SET UP PANELS
     */

  }, {
    key: "_setupPanels",
    value: function _setupPanels() {
      var _this13 = this;

      this.panels.forEach(function (panel, index) {
        panel.setAttribute('id', "badger-accordion-panel-".concat(_this13.ids[index].id));
        panel.setAttribute('aria-labelledby', "badger-accordion-header-".concat(_this13.ids[index].id));

        if (_this13.settings.roles === true || _this13.settings.roles.region !== false) {
          _this13._setRole('region', panel);
        }
      });
    }
  }]);

  return BadgerAccordion;
}(); // Export

export default BadgerAccordion;
//# sourceMappingURL=badger-accordion.esm.js.map




var accordionDomNode = document.querySelector('.js-badger-accordion');
var accordion = new BadgerAccordion(accordionDomNode); 
                      
                      
// API Examples
console.log(accordion.getState([0])); 
// accordion.open( document.querySelector('[data-badger-accordion-header-id="1"]') );
// accordion.close( 0 );

// })));
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console