9.2 #permalink .expander

Toggle example guides Toggle HTML markup

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