{{title}}

#### Accordion:

The accordion component builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.

##### 1. Accordion initially expanded

<accordion> This content is straight in the template.
The accordion component builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
Base specifications: bootstrap 3 or bootstrap 4 </accordion>

##### Example code:

                   <!-- Accordion initially expanded template -->
                   <accordion>
                     <accordion-group heading="Static Header, initially expanded" [isOpen]="isFirstOpen" panelClass="panel-primary">
                       This content is straight in the template.
                      <br>The accordion component builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
                      <br>Base specifications: bootstrap 3 or bootstrap 4
                     </accordion-group>
                   </accordion>

##### 2. Accordion Group

Open only one at a time
{{group?.content}}

##### Example code:

                   <!-- Accordion group template -->
                   <accordion [closeOthers]="oneAtATime">
                     <accordion-group *ngFor="let group of groups" [heading]="group.title" panelClass="panel-info">
                       { { group?.content } }
                     </accordion-group>
                   </accordion>

##### 3. Dynamic Accordion

The body of the accordion group grows to fit the contents

<accordion>
{{item}}

##### Example code:

                   <!-- Dynamic accordion template -->
                   <accordion>
                     <accordion-group heading="Dynamic Body Content" panelClass="panel-success" [isOpen]="true">
                       <div *ngFor="let item of items">
                         { { item } }
                       </div>
                     </accordion-group>
                   </accordion>

##### 4. Markup Accordion

<accordion>
I can have markup,too!
{{group}} This is just some content to illustrate fancy headings.

##### Example code:

                   <!-- Markup accordion template -->
                   <button type="button" class="btn btn-default btn-sm mr-b-10" (click)="status.isOpen = !status.isOpen">Toggle panel</button>
                   <button type="button" class="btn btn-default btn-sm mr-b-10" (click)="status.isDisabled = ! status.isDisabled">Enable / Disable panel</button>
                   <accordion>
                     <accordion-group let group [(isOpen)]="status.isOpen" [isDisabled]="status.isDisabled">
                       <div accordion-heading>
                         I can have markup,too!
                         <i class="pull-right glyphicon" [ngClass]="{'glyphicon-chevron-down': status.isOpen, 'glyphicon-chevron-right': !status.isOpen}"></i>
                       </div>
                       { { group } }
                       This is just some content to illustrate fancy headings.
                     </accordion-group>
                   </accordion>

#### Accordion properties:

- `closeOthers` (`?boolean=false`) - if `true` expanding one item will close all others

#### Accordion Group properties:

- `heading` (`?string=''`) - clickable text in accordion's group header, check `accordion heading` below for using html in header
- `isOpen` (`?boolean=false`) - is accordion group open or closed
- `isDisabled` (`?boolean=false`) - if `true` disables accordion group
- `panelClass` (`?string='panel-default'`) - provides an ability to use Bootstrap's contextual panel classes (`panel-primary`, `panel-success`, `panel-info`, etc...). List of all available classes link

#### Accordion heading:

Instead of the `heading` attribute on the `accordion-group`, you can use an `accordion-heading` attribute on `any` element inside a group that will be used as the group's header template.