zudolab jqAccordion

Simple usage

1. Load "CSSLoader.js", jQuery and "jqAccordion.js"

2. Prepare the (X)html for accordion.
   Following code is the example.
   

   <div class="accordionExample1">
       <div class="item">
           <h2><a href="javascript:void(0)">Group1</a></h2>
           <div class="body">
               <p>Group1 Detail. Group1 Detail.</p>
           </div>
       </div>
       <div class="item">
           <h2><a href="javascript:void(0)">Group2</a></h2>
           <div class="body">
               <p>Group1 Detail. Group1 Detail.</p>
           </div>
       </div>
       <div class="item">
           <h2><a href="javascript:void(0)">Group3</a></h2>
           <div class="body">
               <p>Group1 Detail. Group1 Detail.</p>
           </div>
       </div>
   </div>

3. Prepare the prehide styles in "forjs.css".
   You need to hide all "div.body" first.
   Only active content will be displayed after the document was loaded.

   div.accordionExample1 div.body{
       display:none;
   }

   "forjs.css" will be loaded in "CSSLoader.js".
   Please compare normal demo with JavaScript off demo.
   The JavaScript off users can't load "forjs.css".
   So, they can see all contents.

4. Add the following JavaScript code.
   You need to specify the elements' relationship here.
   This will setup the accordion elements' relationship.
   Specify jQuery selector for each values.

   new jqAccordion({
       container: "div.accordionExample1",
       item: "div.item",
       header: "h2 a",
       body: "div.body"
   });

   "container" is the container element of the accordion.
   "item" is repeatable unit which compose the accordion.
   Each "item" need header and body content in it.
   "header" is the switch to change active item.
   "body" is the main content of the item.

   jqAccodrion will find all "container"s first,
   next find "item"s in it then "header" and "body" in each "item"s.

5. When the "header" was clicked, active "item" will be changed.
   class "opened" will be added to active "item" element.
   class "opened" will be removed when the other "item" was enabled.

6. You can specify the "item" shown first to add class "showThis" to the "item".

   <div class="item showThis">
       <h2><a href="javascript:void(0)">Group1</a></h2>
       <div class="body">
           <p>Group1 Detail. Group1 Detail.</p>
       </div>
   </div>

   jqAccordion finds the "item" element which has "showThis" class after the document was loaded, then remove the class "showThis" and add "opened" to the "item" then show it.
   

Header img

You can use the imgs for "header".

1. Prepare header imgs for "header".
   Put the active/normal imgs like following example.
   Each imgs will be associated by its name.

   • /off/ (normal imgs)
     • 1.gif
     • 2.gif
     • 3.gif
   • /on/ (active imgs)
     • 1.gif
     • 2.gif
     • 3.gif

2. Replace the texts to img elements in the first example.
   Each imgs must have the normal(off) img's path as its src value.

   <div class="accordionExample1">
       <div class="item showThis">
           <h2><a href="javascript:void(0)"><img src="./imgs/off/1.gif" alt="Group1" /></a></h2>
           <div class="body">
               <p>Group1 Detail. Group1 Detail.</p>
           </div>
       </div>
       <div class="item">
           <h2><a href="javascript:void(0)"><img src="./imgs/off/2.gif" alt="Group2" /></a></h2>
           <div class="body">
               <p>Group2 Detail. Group2 Detail.</p>
           </div>
       </div>
       <div class="item">
           <h2><a href="javascript:void(0)"><img src="./imgs/off/3.gif" alt="Group3" /></a></h2>
           <div class="body">
               <p>Group3 Detail. Group3 Detail.</p>
           </div>
       </div>
   </div>

3. The header imgs' src will be switched when the active item was changed.
   Please see the demo to see the result.
4. This feature will be enabled if you put the header img in the "/off/" directory.
   Imgs whose src doesn't contain "/off/" string in its src will be ignored.

Accordion options

You can specify accordion options to change the behavior like following code.

new jqAccordion({
    trigger: "mouseover",
    animation: "slide",
    bodyHeight: "200px",
    container: "#accordionExample6",
    item: "div.item",
    header: "h2 a",
    body: "div.body"
});

Following table is the list of the options.
Please see the demo to see the result.

trigger	Item change trigger. You can specify when the "item" will be swapped, "click" or "mouseover".
bodyHeight	"body"'s height. If you specify this value, each "body"'s height will be fixed. Default value is "auto" and its height will not be fixed. Specify the css value like css's height value. For example, "300px", "10em". I recommend you to specify this value if you choose "mouseover" as the trigger option.
animation	Animation effect. You can specify the animation beharivor for item change, "quick" or "slide". Default value is "quick". If you choose "quick", the items will be changed instantly. If you choose "slide", slide animation effect will be added.
speed	Slide change speed. This is effective when slide animation was chosen. Default value is 200. Too slow speed will confuse the users. Please take care.