Accordion

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

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}}
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


<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;
{{'{'}}

Accordion Attributes

Loading table...

Accordion Item Attributes

Loading table...