Accordion

Accordions are used to toggle the display of sections of content.

Example

Click the accordions below to expand/collapse the accordion content.

Accordion example
Item 1
Item 2
Item 3
accordian-example.component.html 
<ng0-accordion>
    <ng0-accordion-item header="Item 1"> Item 1 </ng0-accordion-item>
    <ng0-accordion-item header="Item 2"> Item 2 </ng0-accordion-item>
    <ng0-accordion-item header="Item 3"> Item 3 </ng0-accordion-item>
</ng0-accordion>
accordian-example.component.ts 
import { Component } from '@angular/core';
import { AccordionModule } from '@bootkit/ng0/components/accordion';

@Component({
    selector: 'app-accordion-example',
    templateUrl: './accordion-example.component.html',
    imports: [AccordionModule]
})
export class AccordionExampleComponent {
}

Flush

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

Flush
Item 1
Item 2
Item 3
flush-example.component.html 
<ng0-accordion class="accordion-flush">
    <ng0-accordion-item header="Item 1"> Item 1 </ng0-accordion-item>
    <ng0-accordion-item header="Item 2"> Item 2 </ng0-accordion-item>
    <ng0-accordion-item header="Item 3"> Item 3 </ng0-accordion-item>
</ng0-accordion>
flush-example.component.ts 
import { Component } from '@angular/core';
import { AccordionModule } from '@bootkit/ng0/components/accordion';

@Component({
    selector: 'app-accordion-flush-example',
    templateUrl: './flush-example.component.html',
    imports: [AccordionModule]
})
export class AccordionFlushExampleComponent {
}

Always open

Set mode="multiple" to make accordion items stay open when another item is opened.

Always open
Item 1
Item 2
Item 3
always-open-example.component.html 
<ng0-accordion mode="multiple">
    <ng0-accordion-item header="Item 1"> Item 1 </ng0-accordion-item>
    <ng0-accordion-item header="Item 2"> Item 2 </ng0-accordion-item>
    <ng0-accordion-item header="Item 3"> Item 3 </ng0-accordion-item>
</ng0-accordion>
always-open-example.component.ts 
import { Component } from '@angular/core';
import { AccordionModule } from '@bootkit/ng0/components/accordion';

@Component({
    selector: 'app-accordion-always-open-example',
    templateUrl: './always-open-example.component.html',
    imports: [AccordionModule]
})
export class AccordionAlwaysOpenExampleComponent {
}

On this page: