## Accordion

Accordion is a custom component to display a list of collapsable items

Animation Duration
Open only one at a time

### Without Styles

This content is showing on start {{ accordionItem?.content }}

The body of the accordion group expands as the content grows

{{contentItem}}
Markup Here! What amazing content!

### With Styles

Static Header 1
This content is showing on start
{{accordionItem.heading}}
{{ accordionItem?.content }}
Accordion Item Body Expands

The body of the accordion group expands as the content grows

{{contentItem}}
Markup Here!
What amazing content!

The class styles from the example Accordion above are added with Fuel-UI's CSS bundle, so feel free to use the HTML below!

### Import

    import {{'{'}}FuiAccordionModule{{'}'}} from 'fuel-ui'; //module
    import {{'{'}}Accordion, AccordionHeading{{'}'}} from 'fuel-ui'; //class

### Getting Started

Accordion is a custom element to show a list of collapsable items. The Accordion component makes use of the Collapse directive to make a highly customizable interface.

### Usage

<tabset>

    <accordion [closeOthers]="oneAtATime" [duration]="duration">
        <accordion-item heading="Static Header 1"
                        [(open)]="firstOpen"
                        [disabled]="firstDisabled">
            This content is showing on start
        </accordion-item>
        <accordion-item #item [(open)]="lastOpen">
            <accordion-heading>
                <a (click)="$event.preventDefault" class="fuel-ui-clickable">Markup Here!</a>
                <i class="pull-right fa"
                    [ngClass]="{{'{'}}'fa-chevron-down': item?.open, 'fa-chevron-right': !item || !item.open{{'}'}}"></i>
            </accordion-heading>
            What amazing content!
        </accordion-item>
    </accordion>

    <accordion [closeOthers]="oneAtATime" [duration]="duration">
        <div accordion-item class="fuel-ui-accordion"
                        [(open)]="firstOpen"
                        [disabled]="firstDisabled">
            <div accordion-heading class="fuel-ui-accordion-heading fuel-ui-clickable"
                        [ngClass]="{{'{'}}'text-muted': firstDisabled{{'}'}}">
                Static Header 1
            </div>
            <div class="fuel-ui-accordion-body">
                This content is showing on start
            </div>
        </div>
        <div accordion-item class="fuel-ui-accordion" #itemStyled [(open)]="lastOpen">
            <div accordion-heading class="fuel-ui-accordion-heading fuel-ui-clickable">
                <a (click)="$event.preventDefault">Markup Here!</a>
                <i class="pull-right fa"
                    [ngClass]="{{'{'}}'fa-chevron-down': itemStyled?.open, 'fa-chevron-right': !itemStyled || !itemStyled.open{{'}'}}"></i>
            </div>
            <div class="fuel-ui-accordion-body">
                What amazing content!
            </div>
        </div>
    </accordion>

    /*
     * This is added in Fuel-UI's CSS bundle already!
     * Feel free to use this as base for your own styles!
     */

    .fuel-ui-accordion {{'{'}}
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;

        .fuel-ui-accordion-heading {{'{'}}
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            color: #333;
            padding: 10px 15px;

            &.text-muted {{'{'}}
                color: #818a91 !important;
            {{'}'}}
        {{'}'}}

        .fuel-ui-accordion-body {{'{'}}
            padding: 15px;
        {{'}'}}
    {{'}'}}

    export class AccordionExample {{'{'}}
        oneAtATime:boolean = true;
        duration:number = 250;
        firstOpen:boolean = true;
        firstDisabled:boolean = false;
        lastOpen:boolean = false;
    {{'{'}}

</tabset>

### Accordion Attributes

Loading table...

### Accordion Item Attributes

Loading table...