Getting Started

Buy it for only $9 Live Examples

This sections is provided to you to help you get started with our software. We appreciate our clients and look forward to receiving feedback from you. Please don't forget to rate it!

A) Unzip and place

  • 1Unzip the contents of the file which you downloaded from codecanyon.net.
  • 2Place zozo.accordion.min.css in the directory css/ of your website or project.
  • 3Place zozo-accordion.png and zozo-accordion-loading.gif in the directory img/ of your website or project.
  • 4Place zozo.accordion.min.js and jquery.min.js in the directory js/ of your website or project.

    Zozo Accordion/
    ├── css/
    │   └── zozo.accordion.min.css
    ├── img/
    │   ├── zozo-accordion.png (Icons)
    │   |-- zozo-accordion-loading.gif (AJAX)
    └── js/
        ├── jquery.min.js                                  
        └── zozo.accordion.min.js

B) Installation

Installing Zozo Accordion is very easy and straight-forward. Simply add the following link and scripts tags with your proper paths and paste the following code within the <head></head> tags of your HTML document.

Optionally you can add HTML5 shiv script (by google) if you make use of the new HTML5 elements such as sections, header etc. This will allow styling of HTML5 elements in older IE browser. You can also includ the jQuery easing plugin for custom animations effects. These both scripts are optional.

<link href="css/zozo.accordion.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/zozo.accordion.min.js"></script>

You are now ready to use Zozo Accordion in your website or poject.

The final step is to activate our accordion. Zozo Accordion is very easy to use and very flexible becuase we can activate it using jQuery selector like any other plugin, but we can also activate it using HTML5 data attributes. That means no JavaScript/jQuery skills are required.

C) Usage: using jQuery selector - top

This section assumes that you have already included Zozo accordion required files as described in section Installation. Creating Zozo accordion is very simple. All we need is to create the basic HTML markup for our accordion and activate it using jQuery selector.
  • 1The basic HTML markup

    Below the basic HTML markup for our accordion, a ul element which contains header and content. Inside each section tag we have a h3 tag for the header and div tag for it's content. Paste the following HTML anywhere within the <body></body> tag:

    You can use any HTML markup to achive your best SEO (Semantic markup, ul, section, header, div, heading etc.).

    <ul id="demo-accordion">
        <li>
            <h3>Getting Started</h3>
            <div>The following default options are provided by the plugin.</div>
        </li>
        <li>
            <h3>Configuration</h3>
            <div>Check it out at zozoui.com</div>
        </li>
        <li>
            <h3>Methods</h3>
            <div>Check it out at zozoui.com</div>
        </li>
        <li>
            <h3>Events</h3>
            <div>Check it out at zozoui.com</div>
        </li>
    </ul>
  • 2Activate using jQuery selector

    Below we using jQuery's selector within jQuery(document).ready() to ativate our accordion. In the below example change a few options for our accordion. Check the online documentation for Extended HTML documentation. Paste the following code just before </body> tag:

    <script> 
    jQuery(document).ready(function ($) {
        $("#demo-accordion").zozoAccordion({
            theme: "silver",
            active: 1,
            sectionSpacing: 4
        });
    });
    </script>
    

    After Zozo accordion has been initialised, Zozo Accordion will also add all the necessary css classes for styling and theming and plus it will add WAI-ARIA roles and attributes for screen readers which can use this extra information to improve a disabled user's experience with your applications. In above example we have included a optional option to change the theme (Zozo accordion comes with more than 10 built-in themes that are ready to go and accepts a lot of options, see section options for further information).


D) Usage: using HTML5 data attributes- top

This section assumes that you have already included Zozo accordion required files as described in section Installation. Creating Zozo accordion is very simple. All we need is to create the basic HTML markup for our accordion and activate it.

This the second way to create Zozo accordion using HTML5 data attributes and we don't need additional JavaScript code. The basic HTML markup stays the same. We are going to add a few HTML5 data attributes. The first one is data-role of z-accordion which is required. In below example we are also including data-theme attribute to change the theme. These data- attributes are used throughout Zozo accordion to transform basic markup into an enhanced and styled widget.

That means we only need the following HTML markup with HTML5 data attributes and past it anywhere within the <body></body> tag:

<ul id="demo-accordion" data-role="z-accordion" data-options='{"theme": "silver", "active": 1, "sectionSpacing": 4}'>
    <li>
        <h3>Getting Started</h3>
        <div>The following default options are provided by the plugin.</div>
    </li>
    <li>
        <h3>Configuration</h3>
        <div>Check it out at zozoui.com</div>
    </li>
    <li>
        <h3>Methods</h3>
        <div>Check it out at zozoui.com</div>
    </li>
    <li>
        <h3>Events</h3>
        <div>Check it out at zozoui.com</div>
    </li>
</ul>

That's it! Soon will come more tutorials for detailed summaries of how to create more complex accordion on www.faridesign.net and www.zozoui.com


Options

The following default options are provided by the plugin. They can be overridden and customized by passing options object to the initialization of the plugin and by using HTML5 data attributes on the container element.

active - Number/Boolean/Array (default: 'false')

Which section is current open when page is loaded. Setting active to false (active: false) will collapse all sections.
Setting active to a number (active: 1), it will open section based on the given index. Starting from zero. The third options is to use array (active:[0,1,3]) which means you can open multiple sections on page load.

$('#demo-accordion').zozoAccordion({
    active: false    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"active": false}'>
    ...

animation - Object (default: 'Object')

this object holds settings about animation, Setting the effects option to none will disable all animations.

$('#demo-accordion').zozoAccordion({
    animation: {
        duration: 600,
        easing: "easeInQuad",
        type: "css"
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"animation": {"duration": 600, "easing": "easeInQuad", "type": "css"}}'>
    ...

animation.duration - Number (default: '400')

Number determining how long the animation will run, default value is 600

$('#demo-accordion').zozoAccordion({
    animation: {
        duration: 600'
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"animation": {"duration": 600"}}'>
    ...

animation.easing - String (default: ''swing' or 'easeOutQuart'')

Default value is 'swing' or 'easeOutQuart' when jQuery easing plugin is included. All effects except 'linear' and 'swing' require the easing plugin. List of easing effects is on the easing website. jQuery easing plugin is completely optional for advanced easing.

$('#demo-accordion').zozoAccordion({
    animation: {
        easing: "easeInQuad"
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"animation": {"easing": "easeInQuad"}}'>
    ...

animation.type - String (default: 'css')

Default value is "jquery" for desktops and css for mobile and tablets (CSS transitions for superfast performance). When it's set to css, it will use CSS transitions with jQuery fallback.

$('#demo-accordion').zozoAccordion({
    animation: {
        type: "css"
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"animation": {"type": "css"}}'>
    ...

autoplay - Object (default: 'Object')

Autoplay can be enabled via accordion options. Delay between items can be set via interval property of autoplay. When smart is enabled, autoplay will stop at first user action

$('#demo-accordion').zozoAccordion({
    autoplay: {        
        interval: 2000,
        smart: true        
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"autoplay": {"interval": 2000, "smart": true}}'>
    ...

autoplay.interval - Number (default: '400')

Default value is null for interval (in milliseconds).

$('#demo-accordion').zozoAccordion({
    autoplay: {
        interval: 3000'
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"autoplay": {"interval": 3000"}}'>
    ...

autoplay.smart - Boolean (default: 'true')

Default value is null for interval (in milliseconds).

$('#demo-accordion').zozoAccordion({
    animation: {
        smart: true'
    }    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"autoplay": {"smart": 3000"}}'>
    ...

bordered - Boolean (default: 'false')

Apply borders to Accordion. The default is false.

$('#demo-accordion').zozoAccordion({
    bordered: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"bordered": true}'>
    ...

cacheAjax - Boolean (default: 'true')

By default every single AJAX requests are cached after the first time.

$('#demo-accordion').zozoAccordion({
    cacheAjax: false    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"cacheAjax": false}'>
    ...

contentHeight - Number (default: '0')

Determines the content height of accordion. Note: This is only applied when orientation option is set to "vertical".

$('#demo-accordion').zozoAccordion({
    contentHeight: 170    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"contentHeight": 170}'>
    ...

contentNav - Boolean (default: 'false')

Set contentNav to true it and add ul list inside accordion as second level navigation. Note: This is only useful when orientation option is set to "vertical". Accordion will displayed as a vertical navigation menu..

$('#demo-accordion').zozoAccordion({
    contentNav: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"contentNav": true}'>
    ...

contentSpacing - Number (default: '0')

Determines the spacing between the accordion sections, Note: This is only applied when orientation option is set to "vertical".

$('#demo-accordion').zozoAccordion({
    contentSpacing: 6    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"contentSpacing": 6}'>
    ...

contentUrls - Array (default: 'null')

The content urls to load acooriond content with AJAX. The url can also a link to external site and in that case the options iframe should be true as well to load iframe content via AJAX.

$('#demo-accordion').zozoAccordion({
    contentUrls: [       
        "ajax-content/content1.html",
        "ajax-content/content2.html",
        "ajax-content/content3.html",
        "ajax-content/content4.html"
    ]    
});
<div id="demo-accordion" data-role="z-accordion" >
    <section>
        <h3 data-content-url="ajax-content/content1.html" >Getting Started</h3>
        <div></div>
    </section>
    <section>
        <h3 data-content-url="ajax-content/content2.html" >Configuration</h3>
        <div></div>
    </section>
    <section>
        <h3 data-content-url="ajax-content/content3.html" >Methods</h3>
        <div></div>
    </section>
    <section>
        <h3 data-content-url="ajax-content/content4.html" >Events</h3>
        <div></div>
    </section>
</div>

dotNav - Boolean (default: 'false')

Adds dot navigation for accordion slider. Note: This is only applied when slider option is set to true.

$('#demo-accordion').zozoAccordion({
    dotNav: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"dotNav": true}'>
    ...

event - String (default: 'click')

The type of event that the accordion header will react to in order to activate the associated content panel. To activate on hover, use "mouseover". When a mobile device is detected it will use the mobile touchend event (without 300ms delay).

$('#demo-accordion').zozoAccordion({
    event: "mouseover"    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"event": "mouseover"}'>
    ...

expandMode - String (default: 'single')

Specifies how the Accordion section are displayed when opened and closed. There are two options available: "single" and "multiple", Note: This is only applied when orientation option is set to "vertical".

$('#demo-accordion').zozoAccordion({
    expandMode: "multiple"    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"expandMode": "multiple"}'>
    ...

headerFontSize - Number (default: '1.5')

Section header font size. It's useful for responsive an normal accordion. It will add in em value to header h3 tag.

$('#demo-accordion').zozoAccordion({
    headerFontSize: 2.1    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"headerFontSize": 2.1}'>
    ...

headerSize - Number (default: '40')

Determines the header width of horizontal accordion and the height of vertical accordion.

$('#demo-accordion').zozoAccordion({
    headerSize: 56    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"headerSize": 56}'>
    ...

height - Number (default: '320')

Determines the height of horizontal accordion. Note: This is only applied when orientation option is set to "horizontal".

$('#demo-accordion').zozoAccordion({
    height: 260    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"height": 260}'>
    ...

keyboard - Boolean (default: 'false')

Enable keyboard navigation

$('#demo-accordion').zozoAccordion({
    keyboard: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"keyboard": true}'>
    ...

minWindowWidth - Number (default: '720')

This option is part of responsive feature, used for switching from horizontal to vertical when minWindowWidth is executed

$('#demo-accordion').zozoAccordion({
    minWindowWidth: 600     
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"minWindowWidth": 600}'>
    ...

orientation - String (default: 'vertical')

The orientation of the accordion, accepts either "horizontal" or "vertical".

$('#demo-accordion').zozoAccordion({
    orientation: "horizontal"    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"orientation": "horizontal"}'>
    ...

rememberState - Boolean (default: 'false')

Remember the accordion toggle state. The data is saved in HTML5 LocalStorage. Also the accordion id is required in order to save it.

$('#demo-accordion').zozoAccordion({
    rememberState: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"rememberState": true}'>
    ...

responsive - Boolean (default: 'false')

Compatible with Tablet, Desktop and Mobile. The layout of the components are scaled according to resolution of the device, thus more consistent regardless of the device. this option doesn't to applied to vertical accordion, it's by default responsive and will take the full width of the parent container.

$('#demo-accordion').zozoAccordion({
    responsive: false    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"responsive": false}'>
    ...

responsiveDelay - Number (default: '100')

This options is used for responsive accordion. Determines timer delay in ms when resizing the browser window. For smoother performance set it 0 and better performance set to heigher number. This options does not change the functionality of responsive accordion.

$('#demo-accordion').zozoAccordion({
    responsiveDelay: 0    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"responsiveDelay": 0}'>
    ...

rounded - Boolean (default: 'false')

Apply CSS3 rounded corners to accordion, Note: Rounded corners is only supported in modern browers.

$('#demo-accordion').zozoAccordion({
    rounded: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"rounded": true}'>
    ...

scrollable - Boolean (default: 'false')

Enables custom styled scrollbar for Webkit when the content of the accordion section is larger than it's height. Also the contentHeight option should be set. Note: custom styled scrollbar is only supported in Webkit browsers, other browser will have the standard scrollbar.

$('#demo-accordion').zozoAccordion({
    scrollable: true,
    contentHeight: 200    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"scrollable": true, "contentHeight": 200}'>
    ...

shadows - Boolean (default: 'true')

Apply CSS3 shadows to Accordion, Note: Shadows is only supported in modern browers.

$('#demo-accordion').zozoAccordion({
    shadows: false    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"shadows": false}'>
    ...

showIcons - Boolean (default: 'true')

Display and hide accordion icons. Default value is true.

$('#demo-accordion').zozoAccordion({
    showIcons: false    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"showIcons": false}'>
    ...

slider - Boolean (default: 'false')

Use accordion as a slider. Add an image in each accordion content panel. For more live example see the slider demo in included examples.

$('#demo-accordion').zozoAccordion({
    slider: true    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"slider": true}'>
    ...

sectionSpacing - Number (default: '0')

Determines the spacing of each section of vertical accordion. When it's set to 0, the accordion will be displayed as group otherwise it will be separate panel. The sectionSpacing will be used spacing between the section panels. Note: This is only applied when orientation option is set to "vertical".

$('#demo-accordion').zozoAccordion({
    sectionSpacing: 6    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"sectionSpacing": 6}'>
    ...

theme - String (default: 'silver')

10 built-in themes that are ready to go (white, crystal, silver, gray, black, orange, red, green, blue, deepblue)..

$('#demo-accordion').zozoAccordion({
    theme: "blue"    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"theme": "blue"}'>
    ...

width - Number (default: '960')

Determines the width of horizontal accordion. Note: This is only applied when orientation option is set to "horizontal".

$('#demo-accordion').zozoAccordion({
    width: 1200    
});
<div id="demo-accordion" data-role="z-accordion" data-options='{"width": 1200}'>
    ...

Methods

select

Selects a specified section by index and displays the linked content.

 Show example
$("#demo-accordion").data("zozoAccordion").select(1);

Parameters

index int

The index of the section

prev

Selects the previous section and displays the linked content.

 Show example
$("#demo-accordion").data("zozoAccordion").prev();

next

Selects the next section and displays the linked content.

 Show example
$("#demo-accordion").data("zozoAccordion").next();

first

Selects the first section and displays the linked content.

 Show example
$("#demo-accordion").data("zozoAccordion").first();

last

Selects the last section and displays the linked content.

 Show example
$("#demo-accordion").data("zozoAccordion").last();

setOptions

Set options by passing object which contains single or multiple options, read more about those settings in the options

 Show example
$("#demo-accordion").data("zozoAccordion").setOptions({ 
    orientation: "horizontal", 
    expandMode: "multiple",
    theme: "green" 
});

Parameters

options object

accordion options object

play

Automatically progress through next section.

 Show example
$("#demo-accordion").data("zozoAccordion").play({ 
    interval: 5000
});

Parameters

interval int

The interval at which the sections should progress at in milliseconds.

stop

Stops autoplay.

 Show example
$("#demo-accordion").data("zozoAccordion").stop();

Events

select

This event is triggered when a section is selected.

 Show example
var onselect = function(event, item) {
    console.log(item.index);
    console.log(item.header);
    console.log(item.content);    
};

$("#demo-accordion").zozoAccordion({
    select: onselect
});

Event Data

event event

The event data object

item.index Number

The index of the selected section panel.

item.header HTMLElement

The header element of the selected section panel.

item.content HTMLElement

The content element of the selected section panel.

activate

This event is triggered after a section has been activated.

 Show example
var onActivate = function(event, item) {
    console.log(item.index);
    console.log(item.header);
    console.log(item.content);    
};

$("#demo-accordion").zozoAccordion({
    activate: onActivate
});

Event Data

event event

The event data object

item.index Number

The index of the activated section panel.

item.header HTMLElement

The header element of the activated section panel.

item.content HTMLElement

The content element of the activated section panel.

contentLoad

This event is triggered after section content is loaded with AJAX.

 Show example
var onContentLoad = function(event, item) {
    console.log(item.index);
    console.log(item.header);
    console.log(item.content);    
};

$("#demo-accordion").zozoAccordion({
    contentLoad: onContentLoad
});

Event Data

event event

The event data object

item.index Number

The index of the section panel which is loaded with AJAX.

item.header HTMLElement

The header element of the section panel which is loaded with AJAX.

item.content HTMLElement

The content element of the section panel which is loaded with AJAX.

error

This event is triggered AJAX request results in an error.

 Show example
var onError = function(event, xhr) {
    console.dir(xhr.status);
    console.dir(xhr.statusText);    
};

$("#demo-accordion").zozoAccordion({
    error: onError
});

Event Data

event event

The event data object

xhr jQuery XHR Object

The jQuery XHR object which is used to load the content.