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.

 Declaration

Example code, GO:

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

 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".

Attributes

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:

Fields/Members

Property Functions

AccordionItem

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.

Fields

Property Functions

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);
    a.Items.Add(x);
}
Page.OnLoad.Add(a);
a.Items[5].Selected(true);

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