Solved

Multiple accordions on one page

Posted on 2013-06-07
3
988 Views
Last Modified: 2013-06-07
Hi,
I'm trying to get two separate accordions working on this page. I've got the first accordion working, but second on won't work at all.

Can't see what the issue is. Site is on my local machine. Can load it live if what I've provided isn't enough.

Thanks!

HTML
<!DOCTYPE html>
<html>
 <head>
 	<title>Robert Lee Fitness Mockup</title>
	<link href="style.css" rel="stylesheet">
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.easing.min.js"></script>
	<script src="js/zozo.accordion.min.js"></script>

 </head>
 <body>
 	<div id="content-wrapper">
	 	<div id="header">
	 		<img class="logo" src="images/logo.png" alt="Robert Lee Fitness" />
	 	</div>
	 	<div id="content">
			<div id="demo-accordion">
			    <section>
			        <h3 class="header-blue">Evolved Breathing</h3>
			        <div>
				        <p>Dolor lorem neque commodo nullam quis et in velit. Neque dignissim aliquam bibendum congue mi. Nascetur iaculis sed augue aliquet ultrices. Dolor vel sagittis sapien egestas ligula. Sapien nec vestibulum. Sapien adipiscing ullamcorper. Mi ut ac. Fringilla at vitae curabitur elementum debitis parturient aenean tempus ac vestibulum massa id risus eget ullamcorper nec eget. Neque orci magna. Id in convallis.</p>
				        <p>Nonummy sollicitudin lectus quisque id phasellus pharetra lectus laoreet. Metus curae cras. Aenean ac nunc ornare cras tempor. Suspendisse sem nisl libero nunc amet. Sapien diam ante quis ac cras.</p>
				        <p class="book">Book An Appointment</p>
				      </div>
			    </section>
			    <section>
			        <h3 class="header-black">United Movement</h3>
			        <div>
				        <p>Dolor lorem neque commodo nullam quis et in velit. Neque dignissim aliquam bibendum congue mi. Nascetur iaculis sed augue aliquet ultrices. Dolor vel sagittis sapien egestas ligula. Sapien nec vestibulum. Sapien adipiscing ullamcorper. Mi ut ac. Fringilla at vitae curabitur elementum debitis parturient aenean tempus ac vestibulum massa id risus eget ullamcorper nec eget. Neque orci magna. Id in convallis.</p>
				        <p>Nonummy sollicitudin lectus quisque id phasellus pharetra lectus laoreet. Metus curae cras. Aenean ac nunc ornare cras tempor. Suspendisse sem nisl libero nunc amet. Sapien diam ante quis ac cras.</p>
				        <p class="book"><a href="">Book An Appointment</a></p>
				      </div>
			    </section>
			</div><!-- end #demo-accordion -->
			<div id="contact">
				<section class="contact-info">
					<h3 class="contact-text">This is a test</h3>
					<p>Blah Blah Blah!</p>
				</section>
			</div>
	 	</div><!-- end #content -->
 	</div><!-- end #content-wrapper -->
	<script> 
	$(document).ready(function(){
	    $("#demo-accordion").zozoAccordion({
	        theme: "",
	        active: 1,
	        sectionSpacing: 4
	    });
	    
	    $("#contact").zozoAccordion({
	        theme: "",
	        active: 1,
	        sectionSpacing: 4
	    });
	    
		});
	</script>
 </body>
</html>

Open in new window


Javascript

/**************************************************************************
*	@name		    Zozo UI Accordion
*	@descripton	    Create awesome accordion
*	@version	    3.4 
*   @requires       jQuery v1.7 or later
*	@copyright      Copyright (c) 2013 Zozo UI
*   @author         Zozo UI
*   @URL:           http://www.zozoui.com
**************************************************************************/


/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 **/
; (function (a) { (jQuery.browser = jQuery.browser || {}).mobile = /(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)) })(navigator.userAgent || navigator.vendor || window.opera);


(function ($, sr) {

    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;
            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    // smartresize 
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery, 'smartresize');

; (function ($, window, document, undefined) {
    if (!window.console) window.console = {};
    if (!window.console.log) window.console.log = function () { };

    $.fn.extend({
        hasClasses: function (selectors) {
            var _base = this;
            for (i in selectors) {
                if ($(_base).hasClass(selectors[i]))
                    return true;
            }
            return false;
        }
    });

    $.zozo = {};
    $.zozo.core = {};
    $.zozo.core.console = {
        debug: false,
        log: function (message) {
            if ($("#zozo-console").length != 0) {
                $("<div/>")
                .css({ marginTop: -24 })
                .html(message)
                .prependTo("#zozo-console")
                .animate({ marginTop: 0 }, 300)
                .animate({ backgroundColor: "#ffffff" }, 800);
            }
            else {
                if (console && this.debug === true) {
                    console.log(message);
                }
            }
        }
    };

    $.zozo.core.keyCodes = {
        tab: 9,
        enter: 13,
        esc: 27,

        space: 32,
        pageup: 33,
        pagedown: 34,
        end: 35,
        home: 36,

        left: 37,
        up: 38,
        right: 39,
        down: 40
    };

    $.zozo.core.debug = {
        startTime: new Date(),
        log: function (msg) {
            if (console) {
                console.log(msg);
            }
        },
        start: function () {
            this.startTime = +new Date();
            this.log("start: " + this.startTime);
        },
        stop: function () {
            var _end = +new Date();
            var _diff = _end - this.startTime;

            this.log("end: " + _end);
            this.log("diff: " + _diff);

            var Seconds_from_T1_to_T2 = _diff / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            //this.log("diff s: " + Seconds_Between_Dates);
        }
    };

    $.zozo.core.support = {
        is_touch_device: function () {
            return (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
        },
        supportsCss: (function () {
            var div = document.createElement('div'), vendors = 'khtml ms o moz webkit'.split(' '), cssPre = false;
            return function (prop) {
                (prop in div.style) && (cssPre = prop)
                var propUp = prop.replace(/^[a-z]/, function (val) { return val.toUpperCase(); });
                $.each(vendors, function (index, value) {
                    (value + propUp in div.style) && (cssPre = '-' + value + '-' + prop);
                });
                return cssPre;
            };
        })(),
        css: {
            transition: false
        }
    };


    $.zozo.core.utils = {
        toArray: function (_object) {
            return $.map(_object, function (value, key) {
                return value;
            });
        },
        createHeader: function (_t, _c) {
            var _tab = $("<li><a>" + _t + "</a></li>");
            var _content = $("<div>" + _c + "</div>");

            return { tab: _tab, content: _content };
        },
        isEmpty: function (_str) {
            return (!_str || 0 === _str.length);
        },
        isNumber: function (_input) {
            return typeof _input === 'number' && isFinite(_input);
        },
        isEven: function (_number) {
            return _number % 2 === 0;
        },
        isOdd: function (_input) {
            return !(_number % 2 === 0);
        },
        animate: function (_base, _elem, _pre, _prop, _post, _hidePre) {
            var _duration = (_base.settings.animation.effects === "none") ? 0 : _base.settings.animation.duration;
            var _easing = _base.settings.animation.easing;
            var _transition = $.zozo.core.support.css.transition;

            if (_elem && _prop) {
                if (_pre) {
                    _elem.css(_pre);
                }

                /* moz transitions css transition fix*/
                var _prLeft = _elem.css("left");
                var _preTop = _elem.css("top");

                if (_base.settings.animation.type === "css") {
                    //pre animation
                    _prop[_transition] = "all " + _duration + "ms ease-in-out"

                    //animation
                    setTimeout(function () {
                        _elem.css(_prop);
                    });

                    //post animation                   
                    setTimeout(function () {
                        _base.settings.animating = false;
                        if (_post) {
                            _elem.css(_post);
                        }
                        _elem.css(_transition, "");
                        //_container.removeClass(ANIMATINGCLASS);
                    }, _duration);
                }
                else {
                    //_elem.show().animate(_prop, {
                    _elem.animate(_prop, {
                        duration: _duration,
                        easing: _easing,
                        complete: function () {
                            _base.settings.animating = false;
                            if (_post) {
                                _elem.css(_post);
                            }
                            // _container.removeClass(ANIMATINGCLASS);
                            if (_hidePre) {
                                _elem.hide();
                            }
                        }
                    });
                }
            }

            return _base;
        }

    };

    $.zozo.core.plugins = {
        easing: function (_base) {
            var _exist = false;
            if (_base) {
                if (_base.settings) {
                    //set up a default value for easing
                    var _defEasing = 'swing';

                    // check for the existence of the easing plugin
                    if ($.easing.def) {
                        _exist = true;
                    }
                    else {
                        if (_base.settings.animation.easing != 'swing' && _base.settings.animation.easing != 'linear') {
                            _base.settings.animation.easing = _defEasing;
                        }
                    }
                }
            }
            return _exist;
        }
    };

    $.zozo.core.browser = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent)
                           || this.searchVersion(navigator.appVersion)
                           || "an unknown version";

            $.zozo.core.console.log("init: " + this.browser + " : " + this.version);


            if (this.browser === "Explorer") {

                var _el = $("html");
                var version = parseInt(this.version);

                if (version === 6) {
                    _el.addClass("ie ie7");
                }
                else if (version === 7) {
                    _el.addClass("ie ie7");
                }
                else if (version === 8) {
                    _el.addClass("ie ie8");
                }
                else if (version === 9) {
                    _el.addClass("ie ie9");
                }
            }
        },
        isIE: function (_version) {
            if ($.zozo.core.utils.isNumber(_version)) {
                return (this.browser === "Explorer" && this.version <= _version)
            }
            else {
                return (this.browser === "Explorer")
            }
        },
        isChrome: function (_version) {
            if ($.zozo.core.utils.isNumber(_version)) {
                return (this.browser === "Chrome" && this.version <= _version)
            }
            else {
                return (this.browser === "Chrome")
            }
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1)
                        return data[i].identity;
                }
                else if (dataProp)
                    return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1)
                return;
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        },
        dataBrowser: [
            {
                string: navigator.userAgent,
                subString: "Chrome",
                identity: "Chrome"
            }, {
                string: navigator.vendor,
                subString: "Apple",
                identity: "Safari",
                versionSearch: "Version"
            }, {
                prop: window.opera,
                identity: "Opera"
            }, {
                string: navigator.userAgent,
                subString: "Firefox",
                identity: "Firefox"
            }, {
                string: navigator.userAgent,
                subString: "MSIE",
                identity: "Explorer",
                versionSearch: "MSIE"
            }
        ]
    };

    $.zozo.core.hashHelper = {
        all: function () {
            var hashArray = [];
            var hash = document.location.hash;

            if (!this.hasHash()) {
                return hashArray;
            }

            hash = hash.substring(1).split('&');

            for (var i = 0; i < hash.length; i++) {
                var match = hash[i].split('=');
                //if (match.length != 2 || match[0] in hashArray) return undefined;
                if (match.length != 2 || match[0] in hashArray) {
                    match[1] = "none";
                }
                hashArray[match[0]] = match[1];
            }

            return hashArray;
        },
        get: function (key) {
            var all = this.all();

            if (typeof all === 'undefined' || typeof all.length < 0) {
                //self.log("get: undefined or null all");
                return null;
            }
            else {
                if (typeof all[key] !== 'undefined' && all[key] !== null) {
                    //self.log("get: exist key");
                    return all[key];
                }
                else {
                    //self.log("get: undefined or null key" + key);
                    return null;
                }
            }

        },
        set: function (key, value) {
            var all = this.all();
            var hash = [];

            all[key] = value;
            for (var key in all) {
                hash.push(key + '=' + all[key]);
            }
            document.location.hash = hash.join('&');
        },
        hasHash: function () {
            var hash = document.location.hash;
            if (hash.length > 0) {
                return true;
            }
            else {
                return false;
            }
        }
    };


    $.zozo.core.support.css.transition = $.zozo.core.support.supportsCss("transition");
    $.zozo.core.browser.init();

})(jQuery, window, document);


; (function ($, window, document, undefined) {
    var ZozoAccordion = function (elem, options) {
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
        this.metadata = (this.$elem.data("options")) ? this.$elem.data("options") : {};
        this.attrdata = (this.$elem.data()) ? this.$elem.data() : {};
        this.elemID;
        this.$sections;
        this.sectionCount;
        this.$container;
        this.$contents;
        this.autoplayIntervalId;
        this.resizeWindowIntervalId;
        this.currentsection;
        this.browser = $.zozo.core.browser;
        this.responsive;
        this.lastWindowHeight;
        this.lastWindowWidth;
    };

    if (window.zozo == null) {
        window.zozo = {};
    }
    var zozo = {
        pluginName: "zozoAccordion",
        elementSpacer: "<span class='z-tab-spacer' style='clear: both;display: block;'></span>",
        commaRegExp: /,/g,
        headerTitle: "<span class='z-title'>Illustrations</span>",
        headerArrow: "<span class='z-arrow'><i class='icon-chevron-down'></i></span>",
        space: " ",
        responsive: {
            largeDesktop: 1200,
            desktop: 960,
            tablet: 720,
            phone: "auto"
        },
        animation: {
            effects: {
                fade: "fade",
                none: "none"
            },
            types: {
                css: "css",
                jquery: "jquery"
            }
        },
        expandModes: {
            single: "single",
            multiple: "multiple"
        },
        events: {
            click: "click",
            mousover: "mouseover",
            mouseenter: "mouseenter",
            mouseleave: "mouseleave",
            touchend: "touchend",
            touchstart: "touchstart",
            touchmove: "touchmove"
        },
        classes: {
            prefix: "z-",
            wrapper: "z-accordion",
            section: "z-section",
            first: "z-first",
            last: "z-last",
            active: "z-active",
            link: "z-link",
            focus: "z-focus",
            container: "z-container",
            content: "z-content",
            shadows: "z-shadows",
            bordered: "z-bordered",
            rounded: "z-rounded",
            scrollable: "z-scrollable",
            autoClass: "z-auto-g",
            themes: {
                gray: "gray",
                black: "black",
                blue: "blue",
                white: "white",
                lightblue: "lightblue",
                deepblue: "deepblue",
                crystal: "crystal",
                green: "green",
                yellow: "yellow",
                purple: "purple",
                silver: "silver",
                red: "red",
                orange: "orange",
                clean: "clean2"
            },
            orientations: {
                vertical: "vertical",
                horizontal: "horizontal"
            },
            groups: {
                grouped: "z-grouped",
                ungrouped: "z-ungrouped"
            }
        }
    },

    PX = "px",
    LINK = ".z-link",
    ARROW = ".z-arrow",
    ERROR = "error",
    DOTNAV = ".z-dot-nav",
    SELECT = "select",
    CONTENT = ".z-content",
    EXPAND = "expand",
    ACTIVATE = "activate",
    SECTION = "section",
    CONTENTS = "> " + CONTENT,
    SECTIONS = "> " + SECTION,
    CONTENTURL = "contentUrl",
    CONTENTLOAD = "contentLoad";
    DOTNAVCLASS = "z-dot-nav",
    MOBILECLASS = "z-mobile",
    ACTIVECLASS = "z-active",
    LOADINGCLASS = "z-loading",
    ACTIVESECTION = SECTIONS + "." + ACTIVECLASS;
    DOTNAVITEMCLASS = "z-dot-nav-item",
    SLIDERWRAPPERCLASS = "z-slider-wrapper",
    SUBNAVCLASS = "z-sub-nav",
    SUBNAV = "> ." + SUBNAVCLASS,
    CONTENTNAVCLASS = "z-content-nav",
    DOTNAVITEM = DOTNAV + " span." + DOTNAVITEMCLASS,
    DOTNAVACTIVEITEM = DOTNAV + " ." + ACTIVECLASS,



    ZozoAccordion.prototype = {
        defaults: {
            animation: { duration: 400, effects: "fadeIn", easing: "easeOutQuart", type: zozo.animation.types.jquery },
            autoplay: { interval: 0, smart: true },
            active: false,
            activate: function () { },
            bordered: true,
            cacheAjax: true,
            contentHeight: 0,
            contentLoad: function () { },
            contentSpacing: 0,
            contentUrls: null,
            contentWidth: 715,
            dotNav: false,
            contentNav: false,
            headerFontSize: 1.5,
            event: zozo.events.click,
            error: function () { },
            expand: function () { },
            expandAfter: false,
            expandMode: zozo.expandModes.single,
            grouped: true,
            headerSize: 40,
            height: 320,
            hideHeaders: false,
            keyboard: false,
            minContentWidth: 0,
            minWidth: 480,
            minWindowWidth: 720,
            orientation: zozo.classes.orientations.vertical,
            original: { width: 0, height: 0, headerSize: 0, headerFontSize: 0, sectionSpacing: 0, orientation: null },
            responsive: false,
            responsiveDelay: 100,
            rounded: false,
            scrollable: false,
            shadows: true,
            showIcons: true,
            slider: false,
            sectionSpacing: 0,
            theme: zozo.classes.themes.silver,
            urlBased: false,
            horizontal: {
                headerSize: 40,
                headerFontSize: 1.1,
                sectionSpacing: 8
            },
            vertical: {
                headerSize: 38,
                headerFontSize: 1.1,
                sectionSpacing: 0
            },
            select: function () { },
            width: 960
        },
        init: function () {
            var _base = this;
            _base.settings = $.extend(true, {}, _base.defaults, _base.options, _base.metadata, _base.attrdata);

            _base.currentsection = _base.settings.active;
            _base.settings.original.width = _base.settings.width;
            _base.settings.original.height = _base.settings.height;
            _base.settings.original.headerSize = _base.settings.headerSize;
            _base.settings.original.orientation = _base.settings.orientation
            _base.settings.original.headerFontSize = _base.settings.headerFontSize;
            _base.settings.original.sectionSpacing = _base.settings.sectionSpacing;


            if (_base.settings.original.orientation === zozo.classes.orientations.vertical) {
                _base.settings.vertical.headerSize = _base.settings.original.headerSize;
            }

            if ((_base.settings.animation.type === zozo.animation.types.css && $.zozo.core.support.transition) || jQuery.browser.mobile) {
                //_base.settings.animation.duration = 0;
            }

            if (_base.settings.slider === true) {
                if (!_base.$elem.parent().hasClass(SLIDERWRAPPERCLASS)) {
                    _base.$elem.wrap("<div class='" + SLIDERWRAPPERCLASS + "'></div>");
                }
                if (_base.settings.dotNav === true && _base.settings.slider === true) {
                    _base.$sections = _base.$elem.find(SECTIONS);

                    var _dotNav = $("<div class='" + DOTNAVCLASS + "'></div>");
                    _base.$sections.each(function (index, item) {
                        _dotNav.append($("<span class='" + DOTNAVITEMCLASS + "'></span>"));
                    });

                    _base.$elem.parent().append(_dotNav);
                }
            }

            $.zozo.core.plugins.easing(_base);

            methods.updateClasses(_base);
            methods.bindEvents(_base);

            if (_base.settings.contentUrls != null) {
                _base.$sections.each(function (index, item) {
                    $(item).find("." + zozo.classes.link).data(CONTENTURL, _base.settings.contentUrls[index]);
                });
            }

            if (_base.settings.responsive === true && _base.settings.original.orientation === zozo.classes.orientations.horizontal) {
                methods.checkWidth(_base);

                //methods.showSection(_base, _base.settings.active);
            }
            else {
                if (_base.settings.orientation === zozo.classes.orientations.vertical) {
                    if ($.zozo.core.utils.isNumber(_base.settings.active)) {
                        methods.showSection(_base, _base.settings.active);
                    }
                }
                else {
                    methods.showSection(_base, _base.settings.active);
                }
            }

            methods.initAutoPlay(_base);
            return _base;
        },
        setOptions: function (_option, _refresh) {
            var _base = this;

            // methods.resetClasses(_base);

            _base.settings.active = _base.currentsection;
            _base.settings = $.extend(true, _base.settings, _option);

            methods.updateClasses(_base, true);

            //(_refresh === true) &&
            methods.showSection(_base, _base.settings.active);
            methods.initAutoPlay(_base);
            return _base;
        },
        select: function (_i) {
            var _base = this;
            methods.showSection(_base, _i);
            return _base;
        },
        first: function () {
            var _base = this;
            _base.select(methods.getFirst(_base));
            return _base;
        },
        prev: function () {
            var _base = this;
            var _currentIndex = parseInt(_base.currentsection);

            if (_currentIndex <= methods.getFirst(_base)) {
                _base.select(methods.getLast(_base));
            }
            else {
                _base.select(_currentIndex - 1);
            }
            return _base;
        },
        next: function (_base) {
            _base = (_base) ? _base : this;
            var _currentIndex = parseInt(_base.currentsection);
            var _count = methods.getLast(_base);

            if (_currentIndex >= _count) {
                _base.select(methods.getFirst(_base));
            }
            else {
                _base.select(_currentIndex + 1);
            }
            return _base;
        },
        last: function () {
            var _base = this;
            _base.select(methods.getLast(_base));
            return _base;
        },
        play: function (interval) {
            var _base = this;
            if (interval == null || interval < 0) {
                interval = 2000;
            }
            _base.settings.autoplay.interval = interval;
            _base.stop();
            _base.autoplayIntervalId = setInterval(function () { _base.next(_base); }, _base.settings.autoplay.interval);

            return _base;
        },
        stop: function (_base) {
            _base = (_base) ? _base : this;
            clearInterval(_base.autoplayIntervalId);
            return _base;
        }
    };

    var methods = {
        resetClasses: function (_base) {
            // stop all animations
            _base.$elem.find('*').stop(true, true);
            _base.elemID = _base.$elem.attr("id");

            _base.$sections = _base.$elem.find(SECTIONS);
            _base.sectionCount = _base.$sections.length;
            //_base.settings.contentWidth = _base.settings.width - (_base.sectionCount * (_base.settings.headerSize + 1));
            _base.settings.contentWidth = _base.settings.width - (_base.sectionCount * (_base.settings.headerSize + _base.settings.sectionSpacing)); // adding lShift

            _base.$elem
                .attr("role", "tablist")
                //.attr("accesskey", "W")
                //.attr("tabindex", "0")
                .removeClass(zozo.classes.wrapper).addClass(zozo.classes.wrapper)
                .removeClass(zozo.classes.orientations.vertical)
                .removeClass(zozo.classes.orientations.horizontal)
                .removeClass(zozo.classes.groups.grouped)
                .removeClass(zozo.classes.groups.ungrouped)
                .addClass(_base.settings.orientation)
                .removeClass(zozo.classes.rounded)
                .removeClass(zozo.classes.shadows)
                .removeClass(zozo.classes.bordered)
                .parents("." + SLIDERWRAPPERCLASS).css({ 'width': "", padding: "" });

            _base.$elem.css({
                width: "",
                height: ""
            });

            _base.$sections.each(function (index, item) {
                var _section = $(item);

                _section.removeClass(zozo.classes.first)
                    .removeClass(zozo.classes.last)
                    .removeClass(zozo.classes.active)
                    .addClass(zozo.classes.section)
                    .css({ margin: 'none' });

                _section.css({
                    left: "",
                    width: "",
                    margin: ""
                });

                _section.find("> h3").css({
                    width: "",
                    height: "",
                    lineHeight: ""
                }).find("span").css({
                    width: "",
                    height: "",
                    lineHeight: ""
                });

                _section.find("> div").css({
                    height: "",
                    maxHeight: "",
                    width: "",
                    left: "",
                    display: "",
                    margin: "",
                    padding: ""
                }).find("> div").css({
                    height: "",
                    width: "",
                    left: "",
                    display: "",
                    margin: "",
                    padding: ""
                });
            });

            return _base;
        },
        updateClasses: function (_base, _active) {
            methods.resetClasses(_base, _active);

            _base.$sections.each(function (index, item) {
                var _head = $(item).find("> h3");
                var _headText = _head.html();
                var _cont = $(item).find("> div");
                var _icon = (_base.settings.showIcons === true) ? "<span class='z-arrow' style='top:none'></span>" : "";

                if (!_head.find("> span.z-title").length) {
                    _head.text("").append("<span class='z-title'>" + $.trim(_headText) + "</span>" + _icon).addClass(zozo.classes.link);
                }
                _cont.addClass(zozo.classes.content);
            });

            //set content height change css
            methods.setContentSize(_base);

            //update first and last
            _base.$sections.filter(zozo.classes.first + ":not(:first-child)").removeClass(zozo.classes.first);
            _base.$sections.filter(zozo.classes.last + ":not(:last-child)").removeClass(zozo.classes.last);
            _base.$sections.filter(":first-child").addClass(zozo.classes.first).find("h3").attr("tabindex", "0").attr("accesskey", "w");
            _base.$sections.filter(":last-child").addClass(zozo.classes.last);

            var _themes = $.zozo.core.utils.toArray(zozo.classes.themes);
            if (!$.zozo.core.utils.isEmpty(_base.settings.theme)) {
                _base.$elem
                .removeClass(_themes.join().replace(zozo.commaRegExp, zozo.space))
                .addClass(_base.settings.theme);
            }
            else {
                if (!_base.$elem.hasClasses(_themes)) {
                    _base.$elem.addClass(zozo.classes.themes.silver);
                }
            }

            if ((_base.settings.animation.type === "css" && $.zozo.core.support.transition) || jQuery.browser.mobile) {
                //_base.settings.animation.duration = 0;

            }

            _base.$elem.addClass("transition");

            (_base.settings.contentNav === true) && _base.$elem.addClass(CONTENTNAVCLASS);
            (jQuery.browser.mobile === true) && (_base.$elem.addClass(MOBILECLASS));
            //($.zozo.core.support.transition) && _base.$elem.addClass("transition");
            (_base.settings.rounded === true) && _base.$elem.addClass(zozo.classes.rounded).parent("." + SLIDERWRAPPERCLASS).addClass(zozo.classes.rounded);
            (_base.settings.scrollable === true) && _base.$elem.addClass(zozo.classes.scrollable);
            (_base.settings.grouped === true) ? _base.$elem.addClass(zozo.classes.groups.grouped) : _base.$elem.addClass(zozo.classes.groups.ungrouped);
            (_base.settings.bordered === true) && _base.$elem.addClass(zozo.classes.bordered);
            (_base.settings.shadows === true) && _base.$elem.addClass(zozo.classes.shadows).parent("." + SLIDERWRAPPERCLASS).addClass(zozo.classes.shadows);




            //add aria
            methods.addAria(_base, { index: _base.currentsection });
        },
        setContentSize: function (_base) {
            var _slider = _base.settings.slider;
            var _contentNav = _base.settings.contentNav;
            var _orientation = _base.settings.orientation;
            var _spacing = (_orientation === zozo.classes.orientations.vertical && _base.settings.responsive === true) ? _base.settings.vertical.sectionSpacing : _base.settings.sectionSpacing;
            var _headerSize = _orientation === zozo.classes.orientations.vertical ? _base.settings.vertical.headerSize : _base.settings.headerSize;
            var _width = _base.settings.contentWidth - ((_base.settings.contentSpacing * 2));
            var _height = _base.settings.height - (_base.settings.contentSpacing * 2);
            var _sliderWrapper = _base.$elem.parents("." + SLIDERWRAPPERCLASS);
            var _isIe8 = $.zozo.core.browser.isIE(8);
            var _isIe9 = $.zozo.core.browser.isIE(9);

            if (_orientation === zozo.classes.orientations.horizontal) {
                if (_spacing > 0) {
                    _base.settings.contentWidth = parseInt(_base.settings.width - (_base.sectionCount * (_base.settings.headerSize + _spacing - 1)));
                }
                else {
                    _base.settings.contentWidth = _base.settings.width - (_base.sectionCount * (_base.settings.headerSize));
                }

                _base.$elem.css({ width: (_spacing > 0) ? _base.settings.width - 1 : _base.settings.width, height: _base.settings.height });
                _sliderWrapper.css({ width: _base.settings.width });
            }
            else {
                (_spacing > 0) ? _base.settings.grouped = false : _base.settings.grouped = true;
            }


            if (_slider == true && _spacing > 0) {
                _sliderWrapper.css({ padding: _spacing + PX });
                (_orientation === zozo.classes.orientations.horizontal) ? _sliderWrapper.css({ paddingRight: 1, paddingBottom: (_spacing - 1) + PX }) : _sliderWrapper.css({ paddingTop: "1px", paddingBottom: "1px" })
            }

            _base.$sections.each(function (index, item) {
                var _$section = $(item);
                var _head = $(item).find("> h3").css({ outline: "none", height: (_headerSize + 1) + PX, lineHeight: (_headerSize) + PX });
                var _cont = $(item).find("> div");


                (_isIe8) && (_head.css({ height: (_headerSize + 3) + PX }).find("> span.z-title").css({ height: (_base.settings.height) + PX }));


                //wrap content in inner content div
                if (!_$section.find(">div>." + zozo.classes.autoClass).length) {
                    var _contentContainer = $("<div class='" + zozo.classes.autoClass + "'></div>");
                    var _contentHtml = _cont.html();
                    _cont.html("");
                    _contentContainer.append(_contentHtml);
                    _contentContainer.appendTo(_cont);

                    (_base.settings.contentNav === true) && _contentContainer.find("> ul").addClass(SUBNAVCLASS);
                }

                if (_orientation === zozo.classes.orientations.horizontal) {
                    _head.css({ width: _base.settings.height });
                    if (_slider === true) {
                        _cont.css({ height: "100%", margin: 0 }).find("img").css({ margin: _base.settings.contentSpacing });

                        //_cont.css({ height: "100%", margin: 0 }).find("iframe").css({ width: "100%", height: "100%" });
                    }

                    if (_base.settings.responsive === true && _base.settings.original.headerFontSize > 0) {
                        _head.css({ fontSize: _base.settings.headerFontSize + "em" });
                    }
                }
                else {

                    //(_base.settings.contentHeight > 0) && (_cont.css({ height: _base.settings.contentHeight, overflow: "auto" }));                                            
                    _$section.css({ overflow: "", width: "100%", left: "", display: "block" });
                    if (_base.settings.grouped === false || _spacing > 0) {
                        _$section.css({
                            marginTop: _spacing + PX,
                            marginBottom: _spacing + PX
                        });
                    }

                    if (_base.settings.responsive === true && _base.settings.vertical.headerFontSize > 0) {
                        _head.css({ fontSize: _base.settings.vertical.headerFontSize + "em" });
                    }
                }

                if (_slider === true || _contentNav === true) {
                    if (_orientation === zozo.classes.orientations.horizontal) {
                        _cont.find(">." + zozo.classes.autoClass).css({ paddingLeft: (_spacing - 2) + PX });

                    } else {
                        _cont.find(">." + zozo.classes.autoClass).css({ paddingTop: _spacing + PX });
                    }
                }


                (_contentNav === true) && _cont.find(">." + zozo.classes.autoClass).find(SUBNAV + " > li:not(:first)").css({ marginTop: _spacing + PX });
            });
        },
        bindEvents: function (_base) {
            var _windowFocus = false;

            $(window).blur(function () {
                _windowFocus = false;
                $.zozo.core.console.log("blur: " + _windowFocus);
            }).focus(function () {
                _windowFocus = true;
                $.zozo.core.console.log("focus: " + _windowFocus);
            });

            _base.$elem.focus(function (e) {
                var _this = $(this);
                var _mdown = _this.data('mdown');

                _this.removeData('mdown');

                if (!_mdown) {
                    _this.addClass(zozo.classes.focus);
                }
            }).blur(function (e) {
                $(this).removeClass(zozo.classes.focus);
            });

            _base.$sections.each(function () {
                var $this = $(this);
                var _section = $this.find("> h3");
                var _content = $this.find("> .z-content");

                //css transition end event    
                _content.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
                    _base.settings.animating = false;
                });

                if (_base.settings.hideHeaders === true) {
                    _section = $(this).find(">div>div>img");
                }

                if (!_section.find("a").length) {
                    methods.bindEvent(_base, _section);

                } else {
                    _section.on(_base.settings.event, function (e) {
                        var link = _section.find("a");
                        var target = link.attr("target");
                        if ($.trim(target).length) {
                            window.open(link.attr("href"), target);
                        }
                        else {
                            window.location = link.attr("href");
                        }
                        e.preventDefault();
                    });
                }




            });

            _base.$elem.bind(SELECT, _base.settings.select);
            _base.$elem.bind(EXPAND, _base.settings.expand);
            _base.$elem.bind(ACTIVATE, _base.settings.activate);
            _base.$elem.bind(ERROR, _base.settings.error);
            _base.$elem.bind(CONTENTLOAD, _base.settings.contentLoad);

            if (_base.settings.slider === true && _base.settings.dotNav === true) {
                $(DOTNAVITEM).each(function () {
                    $(this).on("click", function (_event) {
                        _event.preventDefault();
                        methods.showSection(_base, $(this).index());
                    });
                });


                $(".z-nav a.z-next").click(function (_event) {
                    _event.preventDefault();
                    methods.showSection(_base, _base.currentsection + 1);

                });

                $(".z-nav a.z-prev").click(function (_event) {
                    _event.preventDefault();
                    methods.showSection(_base, _base.currentsection - 1);
                });
            }

            if (_base.settings.responsive === true && _base.settings.original.orientation === zozo.classes.orientations.horizontal) {
                //responsive window resize
                $(window).resize(function () {
                    if (_base.lastWindowHeight !== $(window).height() || _base.lastWindowWidth !== $(window).width()) {
                        clearInterval(_base.resizeWindowIntervalId);
                        _base.resizeWindowIntervalId = setTimeout(function () {

                            _base.lastWindowHeight = $(window).height();
                            _base.lastWindowWidth = $(window).width();

                            methods.checkWidth(_base);
                        }, _base.settings.responsiveDelay);
                    }
                });

            }

        },
        bindEvent: function (_base, _section) {
            //jquery 1.5 _section.bind(_base.settings.event, function (_event) {


            if ($.zozo.core.support.is_touch_device()) {
                _section.on(zozo.events.touchstart, function (_event) {
                    $(this).on(zozo.events.touchend, function (_event) {

                        _event.preventDefault();
                        var _index = $(this).parent().index();
                        _base.currentsection = _index;

                        //stop autoplay if smart is true
                        if (_base.settings.autoplay !== false && _base.settings.autoplay != null) {
                            if (_base.settings.autoplay.smart === true) {
                                _base.stop();
                            }
                        }

                        methods.showSection(_base, _index);


                        $(this).off(zozo.events.touchend);
                    });
                    $(this).on(zozo.events.touchmove, function (_event) { $(this).off(zozo.events.touchend); });
                });
            } else {
                _section.on(_base.settings.event, function (_event) {
                    _event.preventDefault();
                    var _index = $(this).parent().index();
                    _base.currentsection = _index;

                    //stop autoplay if smart is true
                    if (_base.settings.autoplay !== false && _base.settings.autoplay != null) {
                        if (_base.settings.autoplay.smart === true) {
                            _base.stop();
                        }
                    }

                    methods.showSection(_base, _index);
                });
            }




            if (_base.settings.keyboard === true) {
                _section.on('keyup', function (e) {
                    e.preventDefault();
                    var _this = $(this);
                    var _keyCode = e.keyCode || e.which;
                    var _indexOriginal = _this.parent().index();
                    var _index = _this.parent().index();
                    var _total = _base.sectionCount;
                    if (_keyCode == $.zozo.core.keyCodes.space || _keyCode == $.zozo.core.keyCodes.enter) {
                        methods.showSection(_base, _index);
                    }
                    else if (_keyCode >= $.zozo.core.keyCodes.end || _keyCode <= $.zozo.core.keyCodes.down) {
                        if (_keyCode === $.zozo.core.keyCodes.home) {
                            _index = 0;
                        }
                        else if (_keyCode === $.zozo.core.keyCodes.end) {
                            _index = _total - 1;
                        }
                        else if (_keyCode === $.zozo.core.keyCodes.up || _keyCode === $.zozo.core.keyCodes.left) {
                            _index--;
                        }
                        else if (_keyCode === $.zozo.core.keyCodes.down || _keyCode === $.zozo.core.keyCodes.right) {
                            _index++;
                        }

                        if (_index != _indexOriginal) {
                            if (_index === -1) {
                                _index = _total - 1;
                            }
                            if (_index === _total && _keyCode != $.zozo.core.keyCodes.end) {
                                _index = 0;
                            }
                            _base.$sections.find("> h3").eq(_index).focus();
                        }
                    }
                }).mousedown(function (_event) {
                    var _this = $(this);
                    if (!_this.is(':focus')) {
                        _this.data('mdown', true);
                    }
                }).focus(function (e) {
                    var _this = $(this);
                    var _mdown = _this.data('mdown');

                    _this.removeData('mdown');

                    if (!_mdown) {
                        _this.addClass(zozo.classes.focus);
                    }
                }).blur(function (e) {
                    $(this).removeClass(zozo.classes.focus);
                });
            }

        },
        checkWidth: function (_base) {
            var _windowSize = $(window).width();
            var _orientation = _base.settings.orientation;
            var _minContentWidth = _base.settings.minContentWidth;
            var _minWidth = _base.settings.minWidth;
            var _minWindowWidth = _base.settings.minWindowWidth;
            var wrapper = _base.$elem.parents("." + SLIDERWRAPPERCLASS);
            var elem = _base.$elem;

            if (wrapper.length)
                elem = wrapper;

            _base.settings.width = elem.hide().parent().outerWidth() - 2;
            if ($(document).height() > $(window).height())
                //_base.settings.width = elem.hide().parent().outerWidth() - 17;


                if (_base.settings.slider === true && _base.settings.sectionSpacing > 0) {
                    _base.settings.width = _base.settings.width - ((_base.settings.width / _base.settings.original.width) * _base.settings.sectionSpacing);
                }

            elem.show();

            if (_base.settings.width > _base.settings.original.width) {
                _base.settings.width = _base.settings.original.width;
                _base.settings.height = _base.settings.original.height;
                _base.settings.headerSize = _base.settings.original.headerSize;
                _base.settings.headerFontSize = _base.settings.original.headerFontSize;
                _base.settings.sectionSpacing = _base.settings.original.sectionSpacing;

            } else {
                var _ratio = (_base.settings.width / _base.settings.original.width);

                _base.settings.height = parseInt(_ratio * _base.settings.original.height);
                _base.settings.headerSize = _ratio * _base.settings.original.headerSize
                _base.settings.headerFontSize = _ratio * _base.settings.original.headerFontSize;
                _base.settings.sectionSpacing = _ratio * _base.settings.original.sectionSpacing;

                //console.log("radio "+  _ratio );
            }

            /* _base.settings.contentWidth < _minContentWidth
            if (_orientation === zozo.classes.orientations.horizontal) {
                var _spacing = _base.settings.sectionSpacing;
                if (_spacing > 0) {
                    _base.settings.contentWidth = parseInt(_base.settings.width - (_base.sectionCount * (_base.settings.headerSize + _spacing - 1)));
                }
                else {
                    _base.settings.contentWidth = _base.settings.width - (_base.sectionCount * (_base.settings.headerSize));
                }
            }
            */
            //console.log("width: " + _base.settings.width + " / " + _minWidth + " _windowSize: " + _windowSize +" / " +_minWindowWidth + " contentWidth " + _base.settings.contentWidth + " / " + _minContentWidth);            
            console.log("accordionWidth: " + _base.settings.width + " / " + _minWidth + " windowWidth: " + _windowSize + " / " + _minWindowWidth);

            if (_windowSize <= _minWindowWidth || _base.settings.width <= _minWidth) {
                _base.settings.width = _base.settings.original.width;
                _base.settings.height = _base.settings.original.height;
                _base.settings.headerSize = _base.settings.original.headerSize;
                _base.settings.headerFontSize = _base.settings.original.headerFontSize;
                _base.settings.sectionSpacing = _base.settings.vertical.sectionSpacing;
                methods.changeOrientation(_base, zozo.classes.orientations.vertical);
            } else {
                methods.changeOrientation(_base, zozo.classes.orientations.horizontal)
            }
        },
        changeOrientation: function (_base, _orientation) {
            methods.setContentSize(_base);
            if (_orientation != _base.settings.orientation) {
                _base.settings.orientation = _orientation;
                _base.setOptions({ orientation: _orientation });
            }
            else {
                methods.showSection(_base, _base.currentsection, true);
            }
        },
        showSection: function (_base, _index, _noAnimation) {
            //_base.$elem.find('*').stop(true, true);
            var _$section = _base.$elem.find(SECTIONS).eq(_index);
            var $item = {
                index: $.zozo.core.utils.isNumber(_index) ? _index : 0,
                section: _$section,
                head: _$section.find("> h3"),
                link: _$section.find(".z-link"),
                content: _$section.find("> .z-content"),
                contentInner: _$section.find("> .z-content > .z-auto-g"),
                contentUrl: _$section.find(".z-link").data(CONTENTURL),
                noAnimation: _noAnimation
            };


            (_base.settings.select && typeof (_base.settings.select) == typeof (Function)) && _base.$elem.trigger(SELECT, { header: $item.link[0], content: $item.contentInner[0], index: $item.index });

            if ($item.contentUrl) {
                (_base.settings.orientation === zozo.classes.orientations.vertical) ? methods.ajaxRequest(_base, $item, methods.showVertical) : methods.ajaxRequest(_base, $item, methods.showHorizontal);
            } else {
                (_base.settings.orientation === zozo.classes.orientations.vertical) ? methods.showVertical(_base, $item) : methods.showHorizontal(_base, $item);
            }

            methods.updateDotNav(_base, $item);
            methods.addAria(_base, $item);

            _base.currentsection = $item.index;

            //(_base.settings.expand && typeof (_base.settings.expand) == typeof (Function)) && _base.$elem.trigger(EXPAND, { header: $item.link[0], content: $item.contentInner[0] });

            (_base.settings.activate && typeof (_base.settings.activate) == typeof (Function)) && _base.$elem.trigger(ACTIVATE, { header: $item.link[0], content: $item.contentInner[0], index: $item.index });

            return _base;
        },
        showHorizontal: function (_base, _item) {
            var _spacing = _base.settings.orientation === zozo.classes.orientations.vertical ? _base.settings.vertical.sectionSpacing : _base.settings.sectionSpacing;

            var _headerSize = _base.settings.headerSize;
            var _contentWidth = _base.settings.contentWidth;
            var _sectionSpacing = (_spacing > 0) ? _spacing - 1 : _spacing;
            var _left = 0;
            var _index = _item.index;
            var _isIe8 = $.zozo.core.browser.isIE(8);
            //if (_sectionSpacing === 0)
            //(_headerSize = _headerSize - 1)

            _base.$sections.each(function (index, item) {
                var _currentLeft;
                var _$section = $(item);
                var _$head = _$section.find("> h3");
                var _$cont = _$section.find("> .z-content");

                if (index > 0) {
                    //horizontal grouped _left = _left + _headerSize + _sectionSpacing;
                    //_left = _left + _headerSize
                    _left = _left + _headerSize + _sectionSpacing // _shift added
                }

                _currentLeft = _left;

                if (index === _index) {
                    _left = _left + _contentWidth;
                }

                _base.$elem.find("section.z-active > .z-content").parent().removeClass(zozo.classes.active);
                _base.$elem.find("section > .z-content").eq(_index).parent().toggleClass(zozo.classes.active);

                //removed +1 from height of head
                _$head
                    .css({ "outline": "none", "height": _headerSize + 1, "line-height": (_headerSize) + PX })
                    .find("> span.z-title").css({ "height": _headerSize, "line-height": (_headerSize) + PX });
                //.find("> span.z-title").css({ "height": _headerSize, "line-height": (_headerSize - 1) + PX });

                if (_sectionSpacing > 0) {
                    _$head.find("> span.z-title").css({ "height": _headerSize + 2 });
                }

                if (_isIe8) {
                    _$head.find("> span.z-title").css({ height: (_base.settings.height) + PX })
                }


                var _setSectionWidth = _contentWidth + _headerSize + 2;
                var _setContentLeft = (_sectionSpacing === 0) ? _headerSize : _headerSize + 3;//was 2 , 3 for opera

                //ie8 +2    
                if (_isIe8 == true && _sectionSpacing > 0) {
                    _setContentLeft = _setContentLeft + 1;
                }

                if (_isIe8 == true && _sectionSpacing === 0) {
                    _setContentLeft = _setContentLeft + 1;
                }

                if (_item.noAnimation === true) {
                    _$section.stop().css({ "left": _currentLeft, "width": _setSectionWidth });
                    _$cont.css({ "left": _setContentLeft, "width": "auto", "overflow": "", display: "" });
                }
                else {
                   methods.animate(_base, _$section.stop(), null, { "left": _currentLeft, "width": _setSectionWidth });
                   methods.animate(_base, _$cont.stop(), { "left": _setContentLeft, display: "" }, { "width": "auto" }, { "overflow": "" });                    
                }
                // methods.addAria(_base, _$section, _$head, _$cont, index);
            });

            return _base;
        },
        showVertical: function (_base, _item) {
            if (typeof _item.noAnimation === 'undefined' || _item.noAnimation == null) {

                var _contentHeight = _base.settings.contentHeight;
                var _duration = _base.settings.animation.duration;
                var _transition = $.zozo.core.support.css.transition;

                if (_item.section.hasClass(zozo.classes.active)) {
                    setTimeout(function () { _item.section.removeClass(zozo.classes.active); }, _duration);
                    methods.animate(_base, _item.content, null, { height: "0", overflow: "" });
                }
                else {
                    
                    if (_base.settings.expandMode === zozo.expandModes.single) {                      
                        _base.$sections.each(function () {
                            methods.animate(_base, $(this).removeClass(zozo.classes.active).find("> .z-content").stop(), null, { height: "0", overflow: "" });
                        });
                    }
                  
                    /*if (_base.settings.expandMode === zozo.expandModes.single) {
                        methods.animate(_base, _base.$elem.find(ACTIVESECTION).removeClass(zozo.classes.active).find(CONTENTS).stop(), null, { height: "0", overflow: "" });
                    } */

                    var _maxHeight = (_contentHeight <= 0) ? methods.getElementSize(_item.content).height : _contentHeight;
                    methods.animate(_base, _item.content.stop(), null, { height: _maxHeight }, {height:"auto"});

                    _item.section.addClass(zozo.classes.active);

                    if (_contentHeight > 0) {setTimeout(function () { _item.content.css({ overflow: "auto" }); }, _duration);}
                }
            }

            return _base;
        },
        updateDotNav: function (_base, _item) {
            if (_base.settings.slider === true) {
                var _parent = _base.$elem.parent();
                _parent.find(DOTNAVACTIVEITEM).removeClass(zozo.classes.active);
                _parent.find(DOTNAVITEM).eq(_item.index).toggleClass(zozo.classes.active);
            }
        },
        addAria: function (_base, _item) {
            _base.$sections.each(function (index, item) {
                var _$section = $(item);
                var _$head = _$section.find("> h3");
                var _$cont = _$section.find("> div");
                var _expanded = (_$section.hasClass(zozo.classes.active));

                $.zozo.core.console.log("currentsection: " + _base.currentsection + " index: " + _item.index + " expanded: " + _expanded);

                _$section.attr({
                    "aria-hidden": (!_expanded).toString(),
                    "aria-expanded": (_expanded).toString(),
                    "aria-selected": (_expanded).toString()
                });

                _$head.attr({
                    "aria-controls": _base.elemID + "-" + (index + 1),
                    "role": "tab",
                    "tabindex": "-1"
                });

                _$cont.attr({
                    "id": _base.elemID + "-" + (index + 1),
                    "role": "tabpanel",
                    "aria-hidden": (!_expanded).toString(),
                    "aria-expanded": (_expanded).toString()
                });
            });

            return _base;
        },
        ajaxRequest: function (_base, _item, _func) {
            if (!_item.section.hasClass(zozo.classes.active)) {
                var loadingIconTimeout = setTimeout(function () {
                    _item.link.find(ARROW).addClass(LOADINGCLASS);
                }, 100);

                var data = {};

                $.ajax({
                    type: "GET",
                    cache: (_base.settings.cacheAjax === true),
                    url: _item.contentUrl,
                    dataType: "html",
                    data: data,
                    beforeSend: function (xhr, settings) {
                        //return fire(element, 'ajax:beforeSend', [xhr, settings]);
                    },
                    error: function (xhr, status, error) {
                        if (xhr.status == 404) {
                            _item.contentInner.html("<h4 style='color:red;'>Sorry, error: 404 - the requested content could not be found.</h4>");
                        }
                        else {
                            _item.contentInner.html("<h4 style='color:red;'>An error occurred: " + status + "\nError: " + xhr + " code: " + xhr.status + "</h4>");
                        }
                        (_base.settings.error && typeof (_base.settings.error) == typeof (Function)) && _base.$elem.trigger(ERROR, xhr);
                    },
                    complete: function (xhr, status) {
                        //_base.$elem.trigger('ajax:complete', [xhr, status]);
                        clearTimeout(loadingIconTimeout);
                        _item.link.find(ARROW).removeClass(LOADINGCLASS);
                        (_func && typeof (_func) == typeof (Function)) && _func(_base, _item);
                    },
                    success: function (data, status, xhr) {
                        _item.contentInner.html(data);
                        (_base.settings.contentLoad && typeof (_base.settings.contentLoad) == typeof (Function)) && _base.$elem.trigger(CONTENTLOAD, { header: _item.link[0], content: _item.contentInner[0], index: _item.index });
                    }
                });
            } else {
                (_func && typeof (_func) == typeof (Function)) && _func(_base, _item);
            }
            return _base;
        },
        getFirst: function (_base) {
            return 0;
        },
        getLast: function (_base) {
            return parseInt(_base.$sections.size()) - 1;
        },
        initAutoPlay: function (_base) {
            if (_base.settings.autoplay !== false && _base.settings.autoplay != null) {
                if (_base.settings.autoplay.interval > 0) {
                    _base.stop();
                    _base.autoplayIntervalId = setInterval(function () { _base.next(_base); }, _base.settings.autoplay.interval);
                } else {
                    _base.stop();
                }
            }
            else {
                _base.stop();
            }
        },
        animate: function (_base, _elem, _pre, _prop, _post, _hidePre) {
            $.zozo.core.utils.animate(_base, _elem, _pre, _prop, _post, _hidePre);
        },
        getElementSize: function (_content) {
            var _size = { width: 0, height: 0 };
            if (_content == null || _content.length == 0) {
                return _size;
            }

            if (_content.css("height") === 0 || _content.css("height") === "0px") {

                _content.css({ "height": "auto" });

                _size.height = _content.innerHeight();
                _size.width = _content.outerWidth();

                _content.css("height", "0px");

            } else {

                var _oHeight = _content.css("height");

                //_content.css({ "height": "auto" });


                _size.height = _content.innerHeight();
                _size.width = _content.outerWidth();

                // _content.css("height", _oHeight);
            }

            return _size;
        }
    };

    ZozoAccordion.defaults = ZozoAccordion.prototype.defaults;

    $.fn.zozoAccordion = function (options) {
        return this.each(function () {
            if (undefined == $(this).data(zozo.pluginName)) {
                var zozoAccordion = new ZozoAccordion(this, options).init();
                $(this).data(zozo.pluginName, zozoAccordion);
            }
        });
    };

    window.zozo.accordion = ZozoAccordion;

    $(document).ready(function () {
        $("[data-role='z-accordion']").each(function (index, item) {
            if (!$(item).zozoAccordion())
                $(item).zozoAccordion();

            $(item).find("[data-role='z-accordion']").each(function (index, nested2) {
                if (!$(nested2).zozoAccordion())
                    $(nested2).zozoAccordion();

                $(nested2).find("[data-role='z-accordion']").each(function (index, nested3) {
                    if (!$(nested3).zozoAccordion())
                        $(nested3).zozoAccordion();

                    $(nested3).find("[data-role='z-accordion']").each(function (index, nested4) {
                        if (!$(nested4).zozoAccordion())
                            $(nested4).zozoAccordion();
                    });
                });
            });
        });
    });



})(jQuery, window, document);

Open in new window

0
Comment
Question by:Alicia St Rose
  • 3
3 Comments
 
LVL 7

Author Comment

by:Alicia St Rose
ID: 39231047
Here's the CSS as well:

/*#region ==========================================================================
Vertical Structure 
========================================================================== */

.z-accordion.vertical .z-accordion.vertical  {
    
}

.z-accordion.vertical {
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, .1);*/
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #333;
}

    .z-accordion.vertical > section > h3 {
        font: 38px 'bankgothic_lt_btlight';
        font-weight: normal;
        line-height: 40px;
        height:40px;
        padding: 5px 12px 5px 110px;
        margin: 0;        
        display: block;
        position: relative;
        outline: none;
        cursor: pointer;
        text-decoration: none;
        /*background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.035));
        -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);*/
    }
    .z-accordion.vertical > section > h3.header-blue {	
	    	background: url('images/accordion-blk-logo.png') 10px 12px no-repeat #0992c7;
	    	color: #00274c;
    }
    .z-accordion.vertical > section > h3.header-black {
	    	background: url('images/accordion-blu-logo.png') 10px 12px no-repeat #00274c;
	    	color: #0992c7;
    }
        .z-accordion.vertical > section > h3,
         .z-accordion.vertical > section > h3 > .z-title,
        .z-accordion.vertical > section > h3 > .z-arrow {
            /* CSS3 transition 
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;*/
        }

            .z-accordion > section > h3.z-focus{
                z-index: 9999 !important;
            }

           .z-accordion.z-focus,  
           .z-accordion.vertical > section > h3.z-focus, 
           .z-accordion.horizontal > section > h3.z-focus .z-title{
                font-weight: bold  !important;                
                color: black;
              
                background-color:white !important;   
                  background:white !important;                   
                /*outline: 2px solid red !important; */      
                border-bottom:2px solid red !important;         
            }



            .z-accordion.vertical > section > h3 > .z-arrow {
                position: absolute;
                opacity: 0.5;
                 right: 14px;
                 background-image:url('img/arrow-down.png');
                 background: url('images/zozo-accordion.png') no-repeat top left;
                 background-position: 0 0; width: 12px; height: 12px;
                 height:18px;
                 width:18px;
                 /*top: 14px;*/
                 top:50%;
                 margin-top:-6px;

                 /* CSS3 transition 
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;*/
            }

              .z-accordion.vertical > section > h3 > .z-arrow.z-loading {
                 background: url('img/loading.gif');
                height: 16px;
                width: 16px;
                /*top: 12px;*/
                 margin-top:-8px;
            }

            .z-accordion.vertical > section > h3:hover {
                /*padding-left: 20px;*/
            }

                .z-accordion.vertical > section > h3:hover > .z-arrow {
                    opacity: 1;
                }

        .z-accordion.vertical > section.z-active > h3 {
            font-weight: normal;
        }

            .z-accordion.vertical > section.z-active > h3 > .z-arrow, 
            .z-accordion.vertical > section > h3:hover > .z-arrow {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                transform: rotate(90deg);
                right: 14px;
                opacity: 1;              
            }

        .z-accordion.vertical > section > .z-content {            
            /*padding: 20px 15px 10px 15px; version 4.0*/
            display: none;
            background: url('images/accordion-text-bg.png');
            /*height: 200px;
            overflow: hidden;*/
        }

 
      
         .z-accordion.transition.vertical > section > .z-content {            
            height: 0px;
            /*padding: 0px 15px;*/
            overflow: hidden;   
            
            display: block!important;
           /* transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            
            -webkit-perspective: 1000;
            -webkit-backface-visibility: hidden;  
               
            -webkit-transform: translateZ(0);
            -webkit-transition: all 0.5s ease-in-out;      
            -moz-transition: all 0.5s ease-in-out;      
            -o-transition: all 0.5s ease-in-out;      
            -ms-transition: all 0.5s ease-in-out;      
            transition: all 0.5s ease-in-out;*/                   
        }
        .z-accordion.transition.vertical.z-grouped.z-bordered > section > .z-content,
        .z-accordion.transition.vertical.z-ungrouped.z-bordered > section > .z-content
        {
             border-bottom-width:0;
        }

        
        .z-accordion.transition.vertical > section> .z-content > .z-auto-g {           
            /*height: auto; */    
            /*max-height: 9999px;                         */
            /*overflow:auto;*/
            position: relative;
            padding: 10px 15px 45px 15px;
        }


        
        .z-accordion.transition.vertical.z-grouped.z-bordered > section.z-active > .z-content,
        .z-accordion.transition.vertical.z-ungrouped.z-bordered > section.z-active > .z-content
        {
             border-bottom-width:1px;
        }
        
        
      
    /* .ie7 .z-accordion.vertical > section > h3  {line-height: 22px;height:22px;}*/

/*#endregion*/

Open in new window

0
 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 0 total points
ID: 39231066
Fixed it!
I was missing a container dive around the dropdown content!
0
 
LVL 7

Author Closing Comment

by:Alicia St Rose
ID: 39231068
I fixed this. More scrutiny revealed a missing containing div.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now