Taiga UI 5.0 is out!

Accordion KIT

Examples API GitHub

On this page

See also

Expand

Basic

Default use case for an accordion with exclusive expanded item.
Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
Basic elements needed to develop components, directives and more using Taiga UI design system
The main set of components used to build Taiga UI based Angular applications
    
      
    

      
      
    

  
    
      <tui-accordion>
    @for (item of data | keyvalue; track item) {
        <button [tuiAccordion]="$index === 1">{{ item.key }}</button>
        <tui-expand>{{ item.value }}</tui-expand>
    }
</tui-accordion>

Custom

Customizing appearance of the accordion with CSS.
Cashback Pot of gold $237 19:32
Failed to load
Salary Account number ••••237 $43 256 11:02
Shaman Hat Insurrection Apparel −$99 09:11
Shaman Makeup Insurrection Apparel −$75 09:11
    
      
    

      
      
    

  
    
      <tui-accordion class="accordion">
    @for (group of operations | keyvalue: orderBy; track group) {
        <button
            appearance=""
            iconEnd=""
            tuiAccordion
            tuiCell
        >
            <span tuiTitle>
                <strong>{{ group.key }}</strong>
                <span tuiSubtitle>
                    @if (group.value.length) {
                        {{ group.value.length }} operations • Total:
                        {{ sum(group.value) | tuiAmount: '$' : 'start' }}
                    } @else {
                        No operations so far
                    }
                </span>
            </span>
        </button>
        <tui-expand [style.display]="group.value.length ? null : 'none'">
            @for (operation of group.value; track operation) {
                <div tuiCell>
                    <div
                        [appearance]="operation.sum && operation.sum > 0 ? '' : 'negative'"
                        [tuiAvatar]="getIcon(operation)"
                    ></div>
                    <span tuiTitle>
                        <strong>{{ operation.title }}</strong>
                        @if (operation.subtitle) {
                            <span tuiSubtitle>
                                {{ operation.subtitle }}
                            </span>
                        }
                    </span>
                    @if (operation.sum) {
                        <span
                            tuiTitle
                            [style.color]="operation.sum > 0 ? 'var(--tui-text-positive)' : null"
                        >
                            {{ operation.sum | tuiAmount: '$' : 'start' }}
                            <span tuiSubtitle>{{ operation.time }}</span>
                        </span>
                    } @else {
                        <button
                            appearance="secondary"
                            tuiButton
                            type="button"
                        >
                            Retry
                        </button>
                    }
                </div>
            }
        </tui-expand>
    }
</tui-accordion>

    

      
      
    

  
    
      .accordion {
    inline-size: 20rem;
    border-radius: 0;

    [tuiAccordion] {
        border-block-start: 1px solid var(--tui-border-normal);
        background: transparent !important;
        mask: none;
    }

    tui-expand,
    [tuiCell] {
        padding-inline-start: 0;
        padding-inline-end: 0;
        box-shadow: none;
    }
}

Single

Using accordion with a single item akin to details + summary tags.
Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities 
    
      
    

      
      
    

  
    
      <tui-accordion>
    <button tuiAccordion>Taiga UI cdk</button>
    <tui-expand>
        Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
    </tui-expand>
</tui-accordion>

Eager and Lazy

Choosing between eagerly instantiated and lazy instantiated content.
I'm eager content
    
      
    

      
      
    

  
    
      <tui-accordion>
    <button tuiAccordion>Taiga UI lazy</button>
    <tui-expand>
        <ng-container *tuiItem>I'm lazy content</ng-container>
    </tui-expand>
</tui-accordion>

<tui-accordion [style.margin-block-start.rem]="1">
    <button tuiAccordion>Taiga UI eager</button>
    <tui-expand>I'm eager content</tui-expand>
</tui-accordion>

Nested

Showing multiple nested accordion blocks.
Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
The main set of components used to build Taiga UI based Angular applications
Basic elements needed to develop components, directives and more using Taiga UI design system 
    
      
    

      
      
    

  
    
      <tui-accordion>
    <button [tuiAccordion]="true">Level 1</button>
    <tui-expand>
        Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities

        <tui-accordion [style.margin-block-start.rem]="0.75">
            <button [tuiAccordion]="true">Level 2</button>
            <tui-expand>
                The main set of components used to build Taiga UI based Angular applications

                <tui-accordion [style.margin-block-start.rem]="0.75">
                    <button [tuiAccordion]="true">Level 3</button>
                    <tui-expand>
                        Basic elements needed to develop components, directives and more using Taiga UI design system
                    </tui-expand>
                </tui-accordion>
            </tui-expand>
        </tui-accordion>
    </tui-expand>
</tui-accordion>

Connected

Using Connected directive to implement stepper-like UI.
Getting to know your workplace
Start working
Become a pro 
    
      
    

      
      
    

  
    
      <tui-accordion
    tuiConnected
    class="accordion"
>
    @for (item of steps | keyvalue: orderBy; track item) {
        <button
            appearance="icon"
            [tuiAccordion]="$index === 1"
        >
            <div
                [appearance]="isChecked(item.value.steps) ? 'info' : ''"
                [tuiAvatar]="isChecked(item.value.steps) ? '@tui.check' : ''"
            ></div>
            {{ item.key }}
        </button>
        <tui-expand>
            {{ item.value.text }}
            @for (step of item.value.steps; track step) {
                <label tuiCell>
                    <input
                        tuiCheckbox
                        type="checkbox"
                        [ngModel]="selected.includes(step)"
                        (ngModelChange)="toggle(step)"
                    />
                    <span tuiTitle>{{ step }}</span>
                </label>
            }
        </tui-expand>
    }
</tui-accordion>

    

      
      
    

  
    
      .accordion {
    inline-size: 20rem;
    color: var(--tui-text-secondary);

    [tuiAccordion] {
        font: var(--tui-typography-heading-h6);
        padding: 0;
    }

    tui-expand {
        box-shadow: none;
        padding: 0;
    }

    [tuiCell] {
        margin-inline-start: -1rem;
    }
}
GitHub StackBlitz