jQuery Accordion - Documentation

1. Introduction

Thank you for purchase this product. jQuery Accordion is accordion component based in CSS and Javascript code.

2. Installation

Place the reference for CSS and Javascript files inside the “head” section of your page:

<link rel="stylesheet" type="text/css" href="jquery-accordion.css">

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="jquery-accordion.js"></script>

3. HTML markup

jQuery Accordion is based in “DIV’s” and has a fluid layout. Take a look on this accordion composed by a two items:

<div id="accordion" class="accordion">

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

            </div>

            <div class="accordion-content">

            </div>

      </div>

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

            </div>

            <div class="accordion-content">

            </div>

      </div>

</div>

3.1 Icon support

You can use icons on title (Font Awesome). You must put the icon’s markup inside of “accordion-header”:

<div id="accordion" class="accordion">

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

                  <i class="icon-bar-chart"></i>

            </div>

            <div class="accordion-content">

            </div>

      </div>

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

                  <i class="icon-bar-chart"></i>

            </div>

            <div class="accordion-content">

            </div>

      </div>

</div>

3.2 Grid System

jQuery Accordion provides a grid system. You can use a max of 4 columns. The example shows an accordion with 2 columns in the item:

<div id="accordion" class="accordion">

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

                  <i class="icon-bar-chart"></i>

            </div>

            <div class="accordion-content">

                  <div class="row">

                        <div class="col2"></div>

                        <div class="col2"></div>

                  </div>

            </div>

      </div>

</div>

4. Javascript configuration

Put the fallowing code inside the head section of your page:

<script type="text/javascript">

      jQuery(document).ready(function() {

            $("#accordion").jqueryAccordion();

      });

</script>

The code triggers the accordion and is necessary for it to work

You can use various accordions per page using different id's (#accordion1, #accordion2…)

4.1 Javascript options:

Example:

<script type="text/javascript">

      jQuery(document).ready(function() {

            $("#accordion").jqueryAccordion({

                  interval: 500,

                  fadeContent: true,

                  open: true,

                  defaultOpenIndex: 2

            });

      });

</script>

With this parameters, the accordion:

• opens with a 500 milliseconds speed;
• shows his content with fading effect;
• starts with one item opened;

• the content of second item starts visible.

5. Styles

JQuery Accordion has 8 preset styles:

Black - Grey - Blue - Green - Red - Orange - Pink - Purple

The example below uses blue style:

<div id="accordion" class="accordion blue">

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

                  <i class="icon-bar-chart"></i>

            </div>

            <div class="accordion-content">

            </div>

      </div>

      <div class="accordion-item">

            <div class="accordion-header">

                  <span class="title">Header</span>

                  <i class="icon-bar-chart"></i>

            </div>

            <div class="accordion-content">

            </div>

      </div>

</div>

See the demos in the package.

Thank you.