cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
                  <svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="toko" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></symbol><symbol id="call" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></symbol><symbol id="postcard" viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol id="email" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol id="website" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></symbol></svg>

    <header class="header container">
      <h1>Accordion Module</h1>
    </header>


    <main class="main container">
    <section class="section" id="section">

      <div class="Accordion" data-accordion-1>
        <h3 class="accordion_header" data-title><button class="accordion_button" type="button">Alorem</button></h3>
        <div class="accordion_content accordion_content-contact" data-content>
          <h4 class="accordion_label">Alorem</h4>
          <ul class="accordion_contact-list">
            <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
            <li>Street 45</li>
            <li>1234 AB Town</li>
            <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
            <li>1234 AB City</li>
            <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
            <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
            <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
          </ul>

          <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknumbers etc. &hellip;</p>
        </div><!-- .accordion_content -->
      </div><!-- .Accordion -->

      <div class="Accordion" data-accordion-2>
        <h3 class="accordion_header" data-title><button class="accordion_button" type="button">Blorem</button></h3>
        <div class="accordion_content accordion_content-contact" data-content>
          <h4 class="accordion_label">Blorem</h4>
          <ul class="accordion_contact-list">
            <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
            <li>Street 45</li>
            <li>1234 AB Town</li>
            <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
            <li>1234 AB City</li>
            <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
            <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
            <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
          </ul>

          <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknumbers etc. &hellip;</p>
        </div><!-- .accordion_content -->
      </div><!-- .Accordion -->

      <div class="Accordion" data-accordion-3>
        <h3 class="accordion_header" data-title><button class="accordion_button" type="button">Clorem</button></h3>
        <div class="accordion_content accordion_content-contact" data-content>
          <h4 class="accordion_label">Clorem</h4>
          <ul class="accordion_contact-list">
            <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
            <li>Street 45</li>
            <li>1234 AB Town</li>
            <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
            <li>1234 AB City</li>
            <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
            <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
            <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
          </ul>

          <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknumbers etc. &hellip;</p>
        </div><!-- .accordion_content -->
      </div><!-- .Accordion -->

      <div class="Accordion" data-accordion-4>
        <h3 class="accordion_header" data-title><button class="accordion_button" type="button">Dlorem</button></h3>
        <div class="accordion_content accordion_content-contact" data-content>
          <h4 class="accordion_label">Dlorem</h4>
          <ul class="accordion_contact-list">
            <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
            <li>Street 45</li>
            <li>1234 AB Town</li>
            <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
            <li>1234 AB City</li>
            <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
            <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
            <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
          </ul>

          <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknumbers etc. &hellip;</p>
        </div><!-- .accordion_content -->
      </div><!-- .Accordion -->

      <div class="Accordion" data-accordion-5>
        <h3 class="accordion_header" data-title><button class="accordion_button" type="button">Elorem</button></h3>
        <div class="accordion_content accordion_content-contact" data-content>
          <h4 class="accordion_label">Elorem</h4>
          <ul class="accordion_contact-list">
            <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
            <li>Street 45</li>
            <li>1234 AB Town</li>
            <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
            <li>1234 AB City</li>
            <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
            <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
            <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
          </ul>

          <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknumbers etc. &hellip;</p>
        </div><!-- .accordion_content -->
      </div><!-- .Accordion -->


    </section>
    </main>

    <!--     <div class="subfooter container"> -->
    <!--       <div class="login-custom" id="loginCustom"> -->
    <!--         <div class="Accordion accordion_login" id="accordionLogin" data-accordion-6> -->
    <!--  -->
    <!--           <h3 class="accordion_header" data-title><button class="accordion_button" type="button">log in</button></h3> -->
    <!--           <div class="accordion_content accordion_content-contact" data-content> -->
    <!--             <h4 class="accordion_label">log in</h4> -->
    <!--  -->
    <!--             <div class="form form-login"> -->
    <!--  -->
    <!--               <form name="loginform" id="loginform" action="#!" method="post"> -->
    <!--  -->
    <!--                 <p class="login-username"> -->
    <!--                 <label for="user_login">User</label> -->
    <!--                 <input type="text" name="log" id="user_login" class="input" value="" size="20" /> -->
    <!--                 </p> -->
    <!--                 <p class="login-password"> -->
    <!--                 <label for="user_pass">Password</label> -->
    <!--                 <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /> -->
    <!--                 </p> -->
    <!--  -->
      <!--                 <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" />Remember me</label></p>-->
    <!--                 <p class="login-submit"> -->
    <!--                 <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Login" /> -->
    <!--                 <input type="hidden" name="redirect_to" value="#!" /> -->
    <!--                 </p> -->
    <!--  -->
    <!--               </form> -->
    <!--               <p class="small">Password Lost? <a href="#!?action=lostpassword">ask for a new password</a></p> -->
    <!--             </div> -->
    <!--           </div> -->
    <!--         </div> -->
    <!--       </div> .login-custom -->
    <!--     </div> .subfooter -->

    <footer class="footer">
      <div class="colophon">
        <small class="small">by <a href="http://atelierbramdehaan.nl/">Bram de Haan</a> &middot; <a href="http://github.com/atelierbram/Accordion-Module/">on Github</a> &middot; <a href="https://codepen.io/atelierbram/pen/eGKNMe">on Codepen</a> adapted from <a href="https://github.com/10up/wp-component-library ">10up WP Component Library</a> and <a href="https://codepen.io/aaronbushnell/pen/eGVdzv">CSS+JS Accordion to get dynamic max-height value</a> by <a href="https://aaronmbushnell.com/">Aaron Bushnell</a></small>
      </div>
    </footer>
<a href="https://github.com/atelierbram/Accordion-Module" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#2a2734;color:#fff;position:absolute;top:0;border:0;right:0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>   
            
          
!
            
              $base00: #203b46;
$base01: #294956;
$base02: #5e7b87;
$base03: #6b8894;
$base04: #899ca4;
$base05: #97abb4;
$base06: #dfecf1;
$base07: #f5fcff;
$base08: #c14467;
$base09: #a0593b;
$base0A: #a19445;
$base0B: #40964a;
$base0C: #358d74;
$base0D: #119ad4;
$base0E: #6a75cd;
$base0F: #ae429f;

$red:     $base08;
$orange:  $base09;
$yellow:  $base0A;
$green:   $base0B;
$cyan:    $base0C;
$blue:    $base0D;
$violet:  $base0E;
$magenta: $base0F;

$yellow-orange: mix($yellow,$orange,50%);
$orange-red: mix($orange,$red,50%);
$red-magenta: mix($red,$magenta,50%);
$magenta-violet: mix($magenta,$violet,50%);
$violet-blue: mix($violet,$blue,50%);
$blue-cyan: mix($blue,$cyan,50%);
$cyan-green: mix($cyan,$green,50%);
$green-yellow: mix($green,$yellow,50%);

$dark01: adjust-color($base00,$lightness:-5%);
$dark02: $base00;
$dark03: $base01;
$dark04: adjust-color($base01,$lightness:5%);
$dark05: adjust-color($base01,$lightness:10%);
$dark06: adjust-color($base01,$lightness:15%);
$dark07: adjust-color($base01,$lightness:20%);
$dark08: adjust-color($base01,$lightness:25%);

$light08: adjust-color($base01,$lightness:30%);
$light07: adjust-color($base01,$lightness:35%);
$light06: adjust-color($base01,$lightness:40%);
$light05: adjust-color($base01,$lightness:45%);
$light04: adjust-color($base01,$lightness:50%);
$light03: adjust-color($base01,$lightness:55%);
$light02: adjust-color($base01,$lightness:60%);
$light01: adjust-color($base01,$lightness:65%);

$dark_yellow          : adjust-color($yellow,$lightness:-25%);
$dark_yellow-orange   : adjust-color($yellow-orange,$lightness:-23%);
$dark_orange          : adjust-color($orange,$lightness:-22%);
$dark_orange-red      : adjust-color($orange-red,$lightness:-22%);
$dark_red             : adjust-color($red,$lightness:-22%);
$dark_red-magenta     : adjust-color($red-magenta,$lightness:-23%);
$dark_magenta         : adjust-color($magenta,$lightness:-23%);
$dark_magenta-violet  : adjust-color($magenta-violet,$lightness:-26%);
$dark_violet          : adjust-color($violet,$lightness:-26%);
$dark_violet-blue     : adjust-color($violet-blue,$lightness:-30%);
$dark_blue            : adjust-color($blue,$lightness:-30%);
$dark_blue-cyan       : adjust-color($blue-cyan,$lightness:-30%);
$dark_cyan            : adjust-color($cyan,$lightness:-25%);
$dark_cyan-green      : adjust-color($cyan-green,$lightness:-28%);
$dark_green           : adjust-color($green,$lightness:-25%);
$dark_green-yellow   : adjust-color($green-yellow,$lightness: -20%);

$light_yellow         : adjust-color($yellow,$lightness:30%);
$light_orange         : adjust-color($orange,$lightness:30%);
$light_yellow-orange  : mix($light_yellow,$light_orange,50%);
$light_red            : adjust-color($red,$lightness:20%);
$light_orange-red     : mix($light_orange,$light_red,50%);
$light_magenta        : adjust-color($magenta,$lightness:20%);
$light_red-magenta    : mix($light_red,$light_magenta,50%);
$light_violet         : adjust-color($violet,$lightness:10%);
$light_magenta-violet : mix($light_magenta,$light_violet,50%);
$light_blue           : adjust-color($blue,$lightness:20%);
$light_violet-blue    : mix($light_violet,$light_blue,50%);
$light_cyan           : adjust-color($cyan,$lightness:20%);
$light_blue-cyan      : mix($light_blue,$light_cyan,50%);
$light_green          : adjust-color($green,$lightness:20%);
$light_cyan-green     : mix($light_cyan,$light_green,50%);
$light_green-yellow   : adjust-color($green-yellow,$lightness:20%);

$purple: $violet-blue;
$dark_purple: $dark_violet-blue;
$light_purple: $light_violet-blue;
$ui-bg-dark: $base01;
$ui-bg-medium: adjust-color($dark03,$lightness:17%);
$bg-blue: adjust-color($light_blue,$saturation: -66%);

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  min-height: 100%;
  margin-bottom: 1px;
  overflow-y: scroll;
}

html,
body {
  height: 100%;
  background-color: #fff;
}
body {
  font: 100%/1.5 "Fira Sans", AvenirNext-Regular, "Segoe Ui", "Lucida Grande", Verdana, sans-serif;
  box-sizing: inherit;
  margin: 0;
  color: $dark01;
  font-weight: 400;
  min-height: 100%;
  box-sizing: border-box;
}

h1 {
  font-size: 2.5em;
  padding: 1em 0 .25em .5em;
}

h1, h3 {
  font-family: "Fira Sans", AvenirNextCondensed-Demibold, "Segoe UI", "Trebuchet MS", Tahoma, sans-serif;
  margin: 0;
  color: $base02;
  font-weight: 500;
}

img,
svg {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: $blue-cyan;
}


.footer .small a {
  text-decoration: none;
  display: inline-block;
  padding: .25em;
}

.footer .small a:hover {
  background-color: $light_blue-cyan;
  color: #fff;
}

.container {
  max-width: 40em;
  margin: 0 auto;
  // overflow: auto;
  // background-color: #fff;
}

.main {
  min-height: calc(100vh - 14.5em);
  background-color: #fff;
  padding: 2em 3em;
}

.header {
  min-height: 5em;
  padding-left: 2em;
}

// .subfooter {
//   padding-top: 3em;
//   min-height: 2em;
// }

.footer {
  position: absolute;
  right:0;bottom:0;left:0;
  min-height: 3em;
  padding: 3em 2em;
  text-align: center;
  background-color: $light02;
} 

// accordion
.Accordion {
  position: relative;
  margin-top: 2px;
}

// downward triangle in pseudo-element
.accordion_button:after {
  content: "";
  position: absolute;
  top:0;right:0;bottom:0;
  margin-top: 20px;
  margin-right: .75em;
  width: 16px;
  height: 8px;
  // SVG polygoon triangle of 16px wide and 8px tall:
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(31,127,142)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") 0 0 no-repeat;
}

// swap downward triangle with upward triangle when active
.accordion_header.is-active .accordion_button:after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(255,255,255)' points='8,0 16,12 0,12'/%3E%3C/svg%3E") no-repeat;
}

.accordion_button {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 1em;
  margin: 0;
  // accordion_header should be 48px hight
  padding-top: .608em;
  padding-bottom: .408em;
  padding-left: 1em;
  color: adjust-color($dark_blue-cyan, $lightness: 15%);
  background-color: $light01;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: all .4s;
}

.accordion_header.is-active .accordion_button {
  background-color: $light03;
  color: #fff;
  font-weight: 300;
}

.accordion_content {
  overflow: hidden;
  transition: .2s max-height;
  will-change: max-height;
  background-color: adjust-color($light_blue-cyan, $lightness: 36%);
}

.Accordion.is-hidden .accordion_content {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.accordion_label {
  margin: 0 0 0 2.5em;
  font-size: 1.125em;
  padding: 1.5em 0 .5em;
}

.accordion_label:focus {
  outline: none;
}
 
// browsers which dont suport max-height ondersteunen: 2.5% worldwide, will not get a nice transition http://caniuse.com/#feat=minmaxwh
.core .accordion_content {
  display: none;
}

.no-js.core .accordion_content,
.core .accordion_content.is-active {
  display: block;
}
  
.accordion_contact-list {
  margin: 0;
  padding: .5em 2.5em 1em;
  list-style: none;
}

.accordion_contact-list li {
  position: relative;
  margin: 0 0 0 -.75em;
  padding: 0 0 0 1em;
}

// .accordion_content-contact {
//   padding-top: 1em;
// }

.accordion_content-contact p {
  margin: 0;
  padding: .5em 3em 1.5em;
}

.icon-svg-use {
  position: absolute;
  top: .27em;
  left: -.5em;
  height: 16px;
  width: 16px;
  fill: adjust-color($light_blue-cyan, $hue: 7%, $lightness: -10%);
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
}

.github-corner svg[style] {
  transition: .3s all;
  fill: $base06 !important;
  color: $base04 !important;
}

.github-corner:hover svg[style] {
  fill: $base06 !important;
  color: $light_cyan !important;
}


            
          
!
            
              /********************************
https://github.com/10up/wp-component-library
	Name: WordPress Accessible Accordion
	Usage:

	TenUp.accordion( {
		target: '.accordion', // ID (or class) of accordion container
	}, function() {
		console.log( 'Amazing callback function!' );
	} );

********************************/

( function() {
  'use strict';

  // Define global TenUp object if it doesn't exist
  if ( 'object' !== typeof window.TenUp ) {
    window.TenUp = {};
  }

  // This is our global accordion index to keep unique ids
  var topIndex = 0;

  window.TenUp.accordion = function( options, callback ) {
    if ( 'undefined' === typeof options.target ) {
      return false;
    }

    var accordion = document.querySelector( options.target );

    if ( ! accordion ) {
      return;
    }

    // Simple iterator for reuse
    var forEach = function( array, callback, scope ) {
      for ( var i = 0, imax = array.length; i < imax; i++ ) {
        callback.call( scope, i, array[i] ); // passes back stuff we need
      }
    };

    var accordionContent = accordion.getElementsByClassName( 'accordion_content' ),
      accordionHeader  = accordion.getElementsByClassName( 'accordion_header' );

    topIndex++;

    forEach( accordionHeader, function( index, value ) {
      var head  = value,
        index = index + 1;

      // Set ARIA and ID attributes
      head.setAttribute( 'id', 'tab' + topIndex + '-' + index );
      head.setAttribute( 'aria-selected', 'false' );
      head.setAttribute( 'aria-expanded', 'false' );
      head.setAttribute( 'aria-controls', 'panel' + topIndex + '-' + index );
      head.setAttribute( 'role', 'tab' );

      head.addEventListener( 'click', accordionHandle );

      function accordionHandle() {

        var nextPanel = value.nextElementSibling,
          nextPanelLabel = nextPanel.getElementsByClassName( 'accordion_label' )[0];

        value.classList.toggle( 'is-active' );

        nextPanel.classList.toggle( 'is-active' );

        nextPanelLabel.setAttribute( 'tabindex', -1 );
        nextPanelLabel.focus();

        if ( nextPanel.classList.contains( 'is-active' ) ) {

          head.setAttribute( 'aria-selected', 'true' );
          head.setAttribute( 'aria-expanded', 'true' );
          nextPanel.setAttribute( 'aria-hidden', 'false' );

        } else {

          head.setAttribute( 'aria-selected', 'false' );
          head.setAttribute( 'aria-expanded', 'false' );
          nextPanel.setAttribute( 'aria-hidden', 'true' );

        }
      }
    });

    forEach( accordionContent, function( index, value ) {
      var content = value,
        index   = index + 1;

      // Set ARIA and ID attributes
      content.setAttribute( 'id', 'panel' + topIndex + '-' + index );
      content.setAttribute( 'aria-hidden', 'true' );
      content.setAttribute( 'aria-labelledby', 'tab' + topIndex + '-' + index );
      content.setAttribute( 'role', 'tabpanel' );
      //content.setAttribute( 'tabindex', '-1' );
    });

    // Execute the callback function
    if ( typeof callback === 'function' ) {
      callback.call();
    }
  }
} )();

TenUp.accordion( {
  target: '.js-accordion', // ID (or class) of accordion container
}, function() {
  // console.log( 'Amazing callback function!' );
} );

'use strict';
// https://codepen.io/aaronbushnell/pen/eGVdzv
// Simple CSS+JS dynamic max-height accordions by Aaron Bushnell https://codepen.io/aaronbushnell/
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Accordion = function () {
  function Accordion($el) {
    _classCallCheck(this, Accordion);

    this.$el = $el;
    this.$title = this.$el.querySelector('[data-title]');
    this.$content = this.$el.querySelector('[data-content]');
    this.isOpen = false;
    this.height = 0;

    this.events();
    this.close();
  }

  Accordion.prototype.events = function events() {
    this.$title.addEventListener('click', this.handleClick.bind(this));
    this.$content.addEventListener('transitionend', this.handleTransition.bind(this));
  };

  Accordion.prototype.handleClick = function handleClick() {
    this.height = this.$content.scrollHeight;

    if (this.isOpen) {
      this.close();
    } else {
      this.open();
    }
  };

  Accordion.prototype.close = function close() {
    var _this = this;

    this.isOpen = false;
    this.$el.classList.remove('is-active');
    this.$content.style.maxHeight = this.height + 'px';

    setTimeout(function () {
      _this.$content.style.maxHeight = 0 + 'px';
    }, 1);
  };

  Accordion.prototype.open = function open() {
    var _this2 = this;

    this.isOpen = true;
    this.$el.classList.add('is-active');
    this.$el.classList.remove('is-hidden');
    this.$content.style.maxHeight = 0 + 'px';

    setTimeout(function () {
      _this2.$content.style.maxHeight = _this2.height + 'px';
    }, 1);
  };

  Accordion.prototype.handleTransition = function handleTransition() {
    if (!this.isOpen) {
      this.$el.classList.add('is-hidden');
    }

    this.$content.style.maxHeight = '';
  };

  return Accordion;
}();

/*
 * Instantiate a new Accordion
*/
new Accordion(document.querySelector('[data-accordion-1]'));
new Accordion(document.querySelector('[data-accordion-2]'));
new Accordion(document.querySelector('[data-accordion-3]'));
new Accordion(document.querySelector('[data-accordion-4]'));
new Accordion(document.querySelector('[data-accordion-5]'));
            
          
!
999px
Loading ..................

Console