This project is read-only.

Accordion Control

An accordion control is a representation of specific pieces of content that's displayed only one at a time. Whenever a piece is "minimized", it's only represented by a slim portion of the entire control. Let's illustrate that with ASCII art!

|       Accordiong Item #1                                |
|  There's content in                                        |
|  them thar accordions!                                  |
|       Accordion Item #2                                  |

Alright, so after that eye sore, the basic idea is that when we click on Item #2, Item #1 will "roll up" and its content is removed while Item #2 will "roll down" and show its content.


Example code, GO:

<div class="accordion" effect="" headerclass="" itemclass="" selectedclass="">
    <div headertext="My text!">Content</div>
        <span class="header">More stuff <img src="" /></span>

 By giving the div tag the class "accordion", we've told NinJa that this is going to be an accordion control and the declaration will be handled appropriately. Each first level child that is a div will be treated as a specific accordion item. You can define the text for each item (not the content) by either defining the attribute "headertext" or specifying a child tag in an item with the class "header".


  • effect - default: vfold - Handles how the hiding and showing is displayed. none is an instant change, vfold uses a rolling effect.
  • headerclass - default: header - The class to apply to each items' header.
  • itemclass - default: item - The class to apply to each accordion item.
  • selectedclass - default: selected - The class to apply to the header of the item that current has view focus or is "selected" (derp).

Working with Accordions in NinJa

Accordions can be accessed and created in your code. They contain all of the properties of a div including the following:

  • new Accordion(id) - Creates a new accordion with the given id.
  • $Accordion(id) - Reference function for accordions.


  • Items - Array of AccordionItems. Modification to this will dynamically update the control's display.

Property Functions

  • HeaderClass(class), ItemClass(class), SelectedClass(class) - Gets/sets the classes apply to each part of the accordion item and refreshes the display.
  • Effect(effect) - Gets/sets the effect for hiding and showing accordion content.
  • SelectedItem(item) - Gets/sets the currently displayed accordion item. Setting this to null will hide all items.


You can access specific items in the an Accordion and create them on the fly. AccordionItems have all the same properties of a div, including the follow.

  • new AccordionItem(id) - Creates a new AccordionItem with the given id.
  • $AccordionItem(id) - Reference function for AccordionItem.


  • Header - A div element containing the item's header.

Property Functions

  • Selected(selected) - Gets/sets whether the item is selected. If you select this, the parent Accordion will remove selection from the currently selected item. If the item is already selected and Selected is set to false, all content will be hidden.

Building an Accordion on the Fly

Here's a piece of code illustrating how to create an accordion on the fly:

var a = new Accordion(), x;
for(var i = 0; i < 10; i++){
    x = new AccordionItem();
    x.Header.Text("Item #" + i);

And this will create a new accordion with 10 items making the 6th one (0 index!) in the list selected by default.

Last edited Jun 15, 2012 at 7:45 PM by dahrkdaiz, version 2


No comments yet.