1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos


This document matches version 1.6.0 .

The jqcAccordion component (added in v. 1.5.0) enables you to group a set of div elements together in header and panel pairs, and have the panel shown or hidden when the header is clicked.

Creating a jqcAccordion

You create a jqcAccordion like this:

<div id="accordion" jqc-type="jqcAccordion"<
    <div jqc-panel-id="one" <Header 1</div<
    <div<Body 1</div<

    <div jqc-panel-id="two" <Header 2</div<
    <div<Body 2</div<

The outer div element in this example contains the jqc-type="jqcAccordion" attribute. Inside the outer div are four inner div elements. These inner div elements make up the content shown in the jqcAccordion.

These inner div elements are paired up two and two. It is the sequence of the div elements that decide the pairing. The first div element is automatically the header and the div element right after that is automatically the panel (body) belonging to the header. If the header is clicked it will result in the associated panel being shown or hidden.

The next div element after a panel element is automatically a header div, and the next div after that is automatically a panel div. And, so it continues until there are no more div elements inside the outer div (the div that contains the jqc-type="jqcAccordion" attribute declaration).

Expand / Collapse Handles

You can include expand / collapse handles inside the header div elements. The jqcAccordion will take of showing and hiding the right handle depending on the state of the header div (expanded / collapsed). Here is an example:

<div id="accordion" jqc-type="jqcAccordion">
    <div jqc-panel-id="one" >
        <span jqc-accordion-toggle="expand">+</span>
        <span jqc-accordion-toggle="collapse">-</span>
        Header 1
    <div>Body 1</div>

    <div jqc-panel-id="two" >Header 2</div>
    <div>Body 2</div>

It is the two span elements inside the first header div which function as expand and collapse handles. You mark which role a given HTML element is to have by inserting the jqc-accordion-toggle="expand" or jqc-accordion-toggle="collapse" attribute declaration into the HTML element.


The jqcAccordion has the following functions you can use:

expand(panelId) Expands the panel belonging to the header div with the given panelId.
collapse(panelId) Collapses the panel belonging to the header div with the given panelId.
toggle(panelId) Toggles the panel belonging to the header div with the given panelId. Toogle means expand if collapsed, and collapse if expanded.