Accordion CSS, JS

 

 

 

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>

  <div class="accordion js-accordion">
    <div class="accordion__item js-accordion-item active">
      <div class="accordion-header js-accordion-header">Panel 1</div> 
      <div class="accordion-body js-accordion-body">
        <div class="accordion-body__contents">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
        </div>
        <div class="accordion js-accordion">
          <div class="accordion__item js-accordion-item">
           <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
           <div class="accordion-body js-accordion-body">
             <div class="accordion-body__contents">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
            </div><!-- end of sub accordion item body contents -->
          </div><!-- end of sub accordion item body -->
        </div><!-- end of sub accordion item -->
        <div class="accordion__item js-accordion-item">
         <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
         <div class="accordion-body js-accordion-body">
           <div class="accordion-body__contents">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
          </div><!-- end of sub accordion item body contents -->
        </div><!-- end of sub accordion item body -->
      </div><!-- end of sub accordion item -->
    </div><!-- end of sub accordion -->
    </div
  </div><!-- end of accordion body -->
</div><!-- end of accordion item -->



<div class="accordion__item js-accordion-item">
  <div class="accordion-header js-accordion-header">Panel 4</div> 
  <div class="accordion-body js-accordion-body">
    <div class="accordion-body__contents">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
    </div>    
  </div><!-- end of accordion body -->
</div><!-- end of accordion item -->



</div><!-- end of accordion -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

 

body{font-size:62.5%;background:#dadada;font-family:'Open Sans',sans-serif;line-height:2;padding:5em}
.accordion{font-size:1rem;width:30vw;margin:0 auto;border-radius:5px}
.accordion-header{padding:1.5em;background:#3F51B5;text-transform:uppercase;color:#fff;cursor:pointer;font-size:.8em;letter-spacing:.1em;transition:all .3s}
.accordion-header:hover{background:#2D3D99;position:relative;z-index:5}
.accordion-body{background:#fcfcfc;color:#3f3c3c;display:none}
.accordion-body__contents{padding:1.5em;font-size:.85em}
.accordion__item.active:last-child .accordion-header{border-radius:none}
.accordion:first-child>.accordion__item>.accordion-header{border-bottom:1px solid transparent}
.accordion__item>.accordion-header:after{content:"\f3d0";font-family:IonIcons;font-size:1.2em;float:right;position:relative;top:-2px;transition:.3s all;transform:rotate(-90deg)}
.accordion__item.active>.accordion-header:after{transform:rotate(0)}
.accordion__item.active .accordion-header{background:#2D3D99}
.accordion__item .accordion__item .accordion-header{background:#f1f1f1;color:#000}
@media screen and (max-width:1000px) {
  body{padding:1em}
  .accordion{width:100%}
}

 

 

var accordion = (function(){
  
  var $accordion = $('.js-accordion');
  var $accordion_header = $accordion.find('.js-accordion-header');
  var $accordion_item = $('.js-accordion-item');
 
  // default settings 
  var settings = {
    // animation speed
    speed: 400,
    
    // close all other accordion items if true
    oneOpen: false
  };
    
  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      
      $.extend(settings, $settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
        $('.js-accordion-item.active:not(:first)').removeClass('active');
      }
      
      // reveal the active accordion bodies
      $('.js-accordion-item.active').find('> .js-accordion-body').show();
    },
    toggle: function($this) {
            
      if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
        $this.closest('.js-accordion')
               .find('> .js-accordion-item') 
               .removeClass('active')
               .find('.js-accordion-body')
               .slideUp()
      }
      
      // show/hide the clicked accordion item
      $this.closest('.js-accordion-item').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init({ speed: 300, oneOpen: true });
});