Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p>status</p>
<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>
  </ul>
</div>

              
            
!

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;
}
              
            
!

JS

              
                (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() {
            el.trigger('ua-slide-changed');
        }

        this.toggleSlide = function(slideNumber, override) {

            if(!settings.openMultiple) {

                // If multiple is disabled, open current slide and close other

                if(slideNumber !== state.currentSlide || override) {
                    this.hideSlide($(slides[el.children('li.' + settings.activeSlideClass).index()]));
                    this.showSlide($(slides[slideNumber]));
                }

            } else {

                // If multiple is enabled, toggle clicked slide

                if($(slides[slideNumber]).parent().hasClass(settings.activeSlideClass)) {
                    this.hideSlide($(slides[slideNumber]));
                } else {
                    this.showSlide($(slides[slideNumber]));
                }
            }

            state.currentSlide = slideNumber;
        }

        this.showSlide = function(slide) {

            if(state.orientation === "horizontal") {
                slide.slideDown(settings.animationSpeed, showSlideCallback);
            } else {
                slide.parent().animate({
                    width: slide.parent().attr('data-width')
                }, settings.animationSpeed, showSlideCallback);
            }

            slide.parent().addClass(settings.activeSlideClass);
        }

        this.hideSlide = function(slide) {
            if(state.orientation === "horizontal") {
                slide.slideUp(settings.animationSpeed);
            } else {
                slide.parent().animate({
                    width: slide.parent().children(settings.headerItem).attr('data-width')
                }, settings.animationSpeed);
            }

            slide.parent().removeClass(settings.activeSlideClass);
        }

        this.setOrientation = function(orientation) {

            el.removeClass(settings.horizontalClass + ' ' + settings.verticalClass);

            switch(orientation) {
                case 'vertical':
                    el.addClass(settings.verticalClass);
                    $('p').html('switch vertical mode');
                    installVertical();
                    break;

                case 'horizontal':
                    el.addClass(settings.horizontalClass);

                    // Don't wipe styles on first load

                    if(typeof state.orientation !== 'undefined') {
                        uninstallVertical();
                    }
                    
                    $('p').html('switch horizontal mode');
                    applyHorizontalBase();

                    break;
            }

            $(slides[state.currentSlide])
                .show()
                .parent().addClass(settings.activeSlideClass);

            state.orientation = orientation;
        }

        this.setAutoplay = function(enabled) {

            var _this = this;

            if(enabled) {
                state.autoPlayInterval = setInterval(function() {
                    var totalSlides = el.children('li').children(settings.headerItem).length;
                    state.currentSlide = state.currentSlide < (totalSlides - 1) ? state.currentSlide + 1 : 0;
                    _this.toggleSlide(state.currentSlide, true);
                }, settings.autoPlaySpeed);
            } else {
                if(typeof state.autoPlayInterval !== "undefined") {
                    clearInterval(state.autoPlayInterval);
                }
            }
        }

        // Installs styling and events for vertical slider

        var installVertical = function() {

            uninstallVertical();

            $(window).bind('resize', resizeContainer);

            applyVerticalBase();
            calculateSizes();
        }

        var applyVerticalBase = function() {

            slides.parent().css(CSSObject.SlideContainers);

            CSSObject.Headers.functions.setTransforms(-$(headers[0]).outerHeight(), 0);
            CSSObject.Slides.functions.setHeight(el.outerHeight(true));
            CSSObject.Slides.functions.setLeft($(headers[0]).outerHeight(true));

            headers.css(CSSObject.Headers.defaults);
            headers.setOuterWidth(el.innerHeight());
            slides.css(CSSObject.Slides.defaults);
        }

        var applyHorizontalBase = function() {
            slides.css({ 'display': 'none' });
        }

        // Calculate sizes and save widths in data attributes
        // for safe animating

        var calculateSizes = function() {

            var totalHeaderWidth = 0;
            var currentContainer = el.children('li.' + settings.activeSlideClass);
            var currentHeader    = currentContainer.children(settings.headerItem);
            var parentWidth      = parent.innerWidth();

            var slideWidth, headerWidth;

            headers.each(function() {
                headerWidth = $(this).outerHeight(true);
                totalHeaderWidth += headerWidth;

                $(this).parent().width(headerWidth);
                $(this).attr('data-width', headerWidth);
            });

            slides.each(function() {
                slideWidth  = parentWidth - totalHeaderWidth;
                headerWidth = $(this).parent().children(settings.headerItem).outerHeight(true);

                $(this).setOuterWidth(slideWidth);
                $(this).attr('data-width', slideWidth);

                $(this).parent().attr('data-width', slideWidth + headerWidth - 1);
            });

            currentContainer.width(parentWidth - totalHeaderWidth + currentHeader.outerHeight(true) - 1);

        }

        // Called on resize event - adjusts accordion width according
        // to parent to allow fluid design

        var resizeContainer = function() {

            if(state.orientation === "vertical") {

                // If we don't hide the accordion before reading the parent's width value
                // the parent will not auto-adjust in width

                el.css('display', 'none');
                el.width(parent.innerWidth());
                el.css('display', 'block');

                calculateSizes();
            }
        }

        // Uninstalls vertical events and styles

        var uninstallVertical = function() {

            $(window).unbind('resize', resizeContainer);

            el.removeAttr('style');
            el.children('li').removeAttr('style');
            slides.removeAttr('style');

            headers.removeAttr('style');
        }

        // Constructor

        var initialize = function(scope) {

            if(typeof options.headerClass !== 'undefined' && typeof options.contentClass === 'undefined') {
                throw("Content class must be defined along with header class.");
            }

            el.addClass('uberAccordion');

            headers.on(settings.slideEvent, function(e) {
                scope.toggleSlide(el.children('li').children(settings.headerItem).index(this));
                scope.setAutoplay(false);

                e.stopImmediatePropagation();
            });

            // If set to responsive, handle orientation changes

            if(settings.orientationQuery) {
                state.matchesQuery = window.matchMedia(settings.orientationQuery).matches;

                // If media query match state changes, switch orientation
                $(window).resize(function() {
                    if(window.matchMedia(settings.orientationQuery).matches !== state.matchesQuery) {
                        state.matchesQuery = window.matchMedia(settings.orientationQuery).matches;
                        scope.setOrientation(state.orientation === 'vertical' ? 'horizontal' : 'vertical');
                    }
                });

                if(state.matchesQuery) {
                    settings.orientation = settings.orientation === 'vertical' ? 'horizontal' : 'vertical';
                }
            }

            state.currentSlide = settings.startSlide - 1;
            $(slides[state.currentSlide]).parent().addClass(settings.activeSlideClass);

            scope.setOrientation(settings.orientation);

            // Set-up auto-play if enabled

            if(settings.autoPlay && !settings.openMultiple) {
                scope.setAutoplay(true);
            }

            el.attr('data-accordion-active', "true");
        }

        initialize(this);
    }

    $.fn.uberAccordion = function(options) {

        // Avoid double instantiating

        return $(this).children("ul").attr('data-accordion-active') === "true" ? false : new UberAccordion(this, options);
    }

    // Set total width with padding and borders (outerWidth)

    $.fn.setOuterWidth = function(value) {
        $(this).each(function() {
            var paddingLeft = isNaN(parseInt($(this).css('padding-left'), 10)) || $(this).css('padding-left') === '100%' ? 0 : parseInt($(this).css('padding-left'), 10);
            var paddingRight = isNaN(parseInt($(this).css('padding-right'), 10)) || $(this).css('padding-right') === '100%' ? 0 : parseInt($(this).css('padding-right'), 10);
            var borderLeft = isNaN(parseInt($(this).css('border-left-width'), 10)) ? 0 : parseInt($(this).css('border-left-width'), 10);
            var borderRight = isNaN(parseInt($(this).css('border-right-width'), 10)) ? 0 : parseInt($(this).css('border-right-width'), 10);
            
            $(this).width(value - paddingLeft - paddingRight - borderLeft - borderRight);
        });
    }

    // CSS Object for vertical accordion
    // These base styles are necessary for all vertical accordions

    var CSSObject = {

        SlideContainers: {
            'display': 'inline',
            'overflow': 'hidden',
            'float': 'left',
            'height': '100%',
            'position': 'relative'
        },

        Headers: {

            defaults: {
                'display': 'block',
                'float': 'left',
                'white-space': 'nowrap',
                'position': 'absolute',
                'top': '0',
                'left': '0',
                'transform-origin': '0 100% 0',
                '-webkit-transform-origin': '0 100%',
                '-moz-transform-origin': '0 100%',
                '-ms-transform-origin': '0 100%'
            },

            functions: {
                setTransforms: function(x, y) {
                    CSSObject.Headers.defaults['-webkit-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                    CSSObject.Headers.defaults['-moz-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                    CSSObject.Headers.defaults['-ms-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                    CSSObject.Headers.defaults['-sand-transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                    CSSObject.Headers.defaults['transform'] = "rotate(90deg) translate(" + x + "px, " + y + "px)";
                    //CSSObject.Headers.defaults['filter'] = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
                }
            }
        },

        Slides: {

            defaults: {
                'float': 'left',
                'height': 0,
                'display': 'block',
                'position': 'absolute',
                'top': '0'
            },

            functions: {
                setHeight: function(height) { CSSObject.Slides.defaults.height = height; },
                setLeft: function(left) { CSSObject.Slides.defaults.left = left; }
            }
        }
    }

    $('.accordionContainer').uberAccordion({
    headerClass: 'title',
    contentClass: 'content' 
  });
    
}(jQuery));
              
            
!
999px

Console