jQuery - Accordion

If you have a lot of content or a very long menu on your website, the use of accordion may be a good option for your layout. This plugin was created to be of easy setup.

It will allow you

  • To define wich containers to be opened initially in a set of accordions
  • Optionally toggle the the sets of containers. Open one at a time and close the one opened previously
  • To define diferent selectors for the toggler and the container
  • To expand or collapse all containers in a set of accordions
  • Optionally use arrows and define name of the images to be toggled up and down

Suggested amount $25

Installing

Download Download (v1.0.0 - Release version)

Add the following files to your website

    // If you don't have the jQuery file already informed, insert the code bellow
    <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
    
    // Insert the following code after the jQuery code in your website if you
    // prefer the compact version or ...
    <script type="text/javascript" src="source/accordion-1.0.0-min.js"></script>
    
    // ... insert the following if you prefer the development version
    <script type="text/javascript" src="source/accordion-1.0.0.js"></script>

Markup

<div class="accordion">

    <div class="toggler">
        <div class="icon">
        	<img align="absmiddle" src="images/arrow-down.png" alt="Toggle"/>
        </div>
        <div class="title">Table</div>
    </div>

    <div class="container">
    
    	
    
    </div>
    
</div>

Your markup can change slightly if you inform who your elements are

Calling Accordion

<script type="text/javascript">
	$(document).ready(function(){
                           
    	$(".accordion").Accordion();
    
    });
</script>

Choosing What to Be Opened Initially

You can choose one or more items to be opened when the page loads

<script type="text/javascript">
	$(document).ready(function(){
                           
    	$(".accordion").Accordion({
        	openItems : [1,2]
        });
    
    });
</script>

Setting Up Expand and Collapse All Control

// Add the markup for the control
<ul class="accordionControl">
    <li><a href="#" class="collapse">Collapse All</a></li>
    <li><a href="#" class="expand">Expand All</a></li>
</ul>
<script type="text/javascript">
	$(document).ready(function(){
        
        // Make the reference to the unique control for this accordion           
    	$(".accordion").Accordion({
        	openItems : [1,2],
            accordionControl : ".accordionControl"
        });
    
    });
</script>

Toggling Menu

Toggle the menu means close all the other containers leaving just the clicked one opened

<script type="text/javascript">
	$(document).ready(function(){
        
        // Make the reference to the unique control for this accordion           
    	$(".accordion").Accordion({
        	openItems : [1,2],
            accordionControl : ".accordionControl",
            toggle : true
        });
    
    });
</script>

Options

// Make the reference to the unique control for this accordion           
$(".accordion").Accordion({
    // "all", "none", number or array. Default is "all". Array defines the items
    // to be opened by their indexes
    openItems: "all",
    // jQuery selector. Default is ".toggler". If the selector declared doesn't
    // match there will not be a toggler
    toggler: ".toggler",
    // jQuery selector. Default is ".container". If the selector declared doesn't
    // match there will not be a container to toggled
    container: ".container",
    // jQuery selector. Default is null. It is parent of expand and collapse
    // elements and it must be informed
    accordionControl: null,
    // jQuery selector. Default is ".expand". It match and expand all conainers
    // for the current set of accordions
    expandAll: ".expand",
    // jQuery selector. Default is ".collapse". It match and collapse all
    // conainers for the current set of accordions
    collapseAll: ".collapse",
    // boolean. The default is true. It will let the use or not of images
    hasArrows: true,
    // The name of the image indicating close container. The path shouldn't be
    // declared. It will be the same already existent in the HTML markup
    arrowUp: "control-double-090.png",
    // The name of the image indicating open container. The path shouldn't be
    // declared. It will be the same already existent in the HTML markup
    arrowDown: "control-double-270.png",
    // Toggle the sets of containers. It will be possible have just open at a
    // time unless if expandAll exists
    toggle: false
});

Demo

Toggle
Random Text

Praesent sed fermentum lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec imperdiet rhoncus fringilla. Aliquam erat volutpat. Phasellus pharetra viverra tempor. Phasellus enim mi, varius sed feugiat in, luctus id turpis. Curabitur eget ligula eros, non condimentum nibh. Nulla sit amet metus arcu. Sed luctus odio sit amet lectus adipiscing id scelerisque nisl tristique. Nulla convallis sollicitudin lorem interdum pellentesque. Ut condimentum ligula vel elit fermentum vel cursus purus mattis. Sed mattis neque eu dolor scelerisque fringilla. Aliquam volutpat nulla id arcu rutrum ac dictum mauris aliquam. Mauris suscipit leo quis mi placerat at venenatis ipsum volutpat. Donec tempus sollicitudin neque.

Toggle
Table
Canada Alberta British Columbia Yukon Territory
English 20,584,770 2,893,240 3,341,285 28,540
French 6,608,125 19,315 15,325 540
Non-official Language 3,472,130 297,955 639,380 935
English and French 94,055 3,340 3,610 65
English and Non-official Language 406,455 41,645 73,730 110
French and Non-official Language 58,885 460 465 0
English, French and Non-official Language 16,600 395 580 0
Toggle
List

Fruits

  • Pear
  • Apple
  • Peach
  • Strawberry

Soccer Players

  • Pelé
  • Garrincha
  • Ronaldo
  • Rivelino

Toggle
Image
You may not be able to see this image if you are using proxy

Using jQuery Accordion on your menu

Recommend this page