Zozo Accordion - Documentation

Thank you for purchasing our software and becoming one of our valued clients. This document is provided to you to help you get started with our software. For extended documentation and API refference check http://zozoui.com.
We appreciate our clients and look forward to receiving feedback from you. Please don't forget to rate it!

© 2013 Zozo UI is a project by Farid Hayati
More Live Demos | Extended HTML documentation | Contact Us

Table of Contents

  1. Unzip and place
  2. Installation
  3. Usage: using jQuery selector
  4. Usage: using HTML5 data attributes

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

Contact us - top

We always want to make sure that you are satisfied with your purchase. For support you can contact us using the following ways. Please don’t forget to rate us on codecanyon if you like our work.

To get notified about Zozo accordion or our other product updates or my new releases, like our Facebook Page, follow us on Twitter or join our email newsletter (unsubscribe at any time, MailChimp powered). We would love to see zozo ui in action! Please don't hesitate to send us live link, any info, screen shots, etc. showing it to us. We would be more than happy to add a link to zozoui.com or on our codecanyon page to your website.

Go To Table of Contents

©