horizontal accordion

by mrjordy

HTML

<div class="accordionContainer">
  <ul>
    <li>
      <h1 class="title">Slide One</h1>
      <div class="content">
        Content forslide one is rendered here. Content for  one is rendered from here. Content for slide one is  from here. Content for one is rendered  here. Content is here. Content for one is  from here. Content for slide is from here. Content for one is rendered from here. Content forslide one is rendered here. Content for one is rendered from here. Content for slide one is  from here. Content for one is rendered  here. Content is here. Content for one is  from here. Content for slide is from here. Content for one is rendered from here. Content forslide one is rendered here. Content for  one is rendered from here. Content for slide one is  from here. Content for one is rendered  here. Content is here. Content for one is  from here. Content for slide is from here. Content for one is rendered from here. Content forslide one is rendered here. Content for  one is rendered from here. Content for slide one is  from here. Content for one is rendered  here. Content is here. Content for one is  from here. Content for slide is from here. Content for one is rendered from here.
      </div>
    </li>

    <li>
      <h1 class="title">Slide Two</h1>
      <div class="content">
        Content for slide two is rendered from here.
      </div>
    </li>

    <li>
      <h1 class="title">Slide Three</h1>
      <div class="content">
        Content for slide three is rendered from here.
      </div>
    </li>
      
    <li>
      <h1 class="title">Slide Four</h1>
      <div class="content">
        Content for slide four is rendered from here.
      </div>
    </li>
     
    <li>
      <h1 class="title">Slide Five</h1>
      <div class="content">
        Content for slide five is rendered from here.
      </div>
    </li>
      
    <li>
      <h1 class="title">Slide Six</h1>
      <div class="content">
        Content for slide six is rendered from here.
    ...

CSS

.uberAccordion {
   padding: 0;
}

.uberAccordion > li {
    list-style: none;
    margin: 0;
}

.uberAccordion > li > h1 {
    background-color: #e3e3e3;
    margin: 0;
    font-size: 16px;
    padding: 5px;
    cursor: pointer;
}

.uberAccordion > li > div {
    background-color: #aaa;
    padding: 15px;
}


/* Default CSS for sub-accordion */

.uberAccordion .uberAccordion > li > h1 {
    font-size: 12px;
    padding: 5px;
}

.uberAccordion .uberAccordion > li > div {
   background-color: #666666;
   color: #FFF;
}


/* Default CSS for vertical orientation */

.uberAccordion.accordion-vertical {
    height: 300px;
}

.uberAccordion .uberAccordion.accordion-vertical {
    height: 260px;
}

/* below: hack to access the head of the result in jsfiddle */
 </style> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> </style>

JavaScript

(function($) {

    var UberAccordion = function(parent, options) {

        // Default settings

        var defaults = {
            verticalClass    : 'accordion-vertical',    // Class to apply when orientation is vertical
            horizontalClass  : 'accordion-horizontal',  // Class to apply when orientation is horizontal
            activeSlideClass : 'active',                // Class to apply on active accordion slide
            orientation      : 'vertical',              // Accordion orientation
            orientationQuery : '(max-width: 700px)',    // Media query which causes orientation change
            startSlide       : 1,                       // Starter slide
            openMultiple     : false,                   // Set to true for multiple open slides at a time
            autoPlay         : false,                   // Auto-play
            autoPlaySpeed    : 5000,                    // Auto-play interval
            slideEvent       : 'click',                 // Open slide event
            animationSpeed   : 333,                     // Animation Speed
            headerItem       : typeof options.headerClass === 'undefined' ? 'h1' : '.' + options.headerClass,     // Header class
            contentItem      : typeof options.contentClass === 'undefined' ? 'div' : '.' + options.contentClass   // Content class
        };

        var settings  = $.extend(true, {}, defaults, options);                  // Add user settings with overwrite
        var el        = parent.children('ul');                                  // Accordion container
        var slides    = el.children().children(settings.contentItem);           // Accordion slides
        var headers   = el.children('li').children(settings.headerItem);        // Accordion headers
        var state     = {};                                                     // Keeps current accordion state (ie. currentSlide, orientation, etc)

        var showSlideCallback = function() {
           ...