9 #permalink Accordion

Accordions allow to wrap up contents and show/hide them after the accordion heading (a.k.a. the clickable area) is clicked. They should only be used for aside or additional content, not for the main information

Source: accordion/css/accordion.css, line 1

9.1 #permalink .accordionlist

The widget itself always contains accordion items that are devided in two areas: The accordion_head which defines the clickable area of the component as well as the accordion_body which contains the contents. Usually accordions shall visualize their state via a icon inside the clickable area

Example

Headcontent goes here

Bodycontent goes here

Headcontent goes here

Bodycontent goes here

Headcontent goes here

Bodycontent goes here

Markup

<div class="accordionlist" data-widget="AccordionList">
    <div class="accordion" data-widget="Accordion" data-defer="true" data-accordion-icon-open="fa fa-plus" data-accordion-icon-close="fa fa-minus" data-accordion-initialstate>
        <div class="accordion_head" data-accordion-action>
            <div class="accordion_head_content">
                Headcontent goes here
            </div>
        </div>
        <div class="accordion_body" data-accordion-effect>
            Bodycontent goes here
        </div>
    </div>
    <div class="accordion" data-widget="Accordion" data-defer="true" data-accordion-icon-open="fa fa-plus" data-accordion-icon-close="fa fa-minus" data-accordion-initialstate>
        <div class="accordion_head" data-accordion-action>
            <div class="accordion_head_content">
                Headcontent goes here
            </div>
        </div>
        <div class="accordion_body" data-accordion-effect>
            Bodycontent goes here
        </div>
    </div>
    <div class="accordion" data-widget="Accordion" data-defer="true" data-accordion-icon-open="fa fa-plus" data-accordion-icon-close="fa fa-minus" data-accordion-initialstate>
        <div class="accordion_head" data-accordion-action>
            <div class="accordion_head_content">
                Headcontent goes here
            </div>
        </div>
        <div class="accordion_body" data-accordion-effect>
            Bodycontent goes here
        </div>
    </div>
</div>

Source: accordion/css/accordion.css, line 10

9.2 #permalink .expander

The widget itself always contains two areas: The expander_head which defines the clickable area of the component as well as the expander_body which contains the contents. Usually expanders shall visualize their state via a icon inside the clickable area

Example

Headcontent goes here

Bodycontent goes here

Markup

<div class="expander" data-widget="Accordion" data-accordion-icon-open="fa fa-plus" data-accordion-icon-close="fa fa-minus" data-accordion-initialstate data-accordion-prefix="expander">
    <div class="expander_head" data-accordion-action>
        <div class="expander_head_content">
            Headcontent goes here
        </div>
    </div>
    <div class="expander_body" data-accordion-effect>
        Bodycontent goes here
    </div>
</div>

Source: accordion/css/expander.css, line 1