BootKit
Getting Started
Components

Accordion

Build vertically collapsing accordions in combination with Collapse component.

Basic Usage

Basic Usage
Item 1 content.
Item 2 content.
Item 3 content.
HTML
<bk-accordion >
   <bk-accordion-item header="Item 1">
       Item 1 content.
   </bk-accordion-item>
   <bk-accordion-item header="Item 2">
       Item 2 content.
   </bk-accordion-item>
   <bk-accordion-item header="Item 3">
       Item 3 content.
   </bk-accordion-item>
</bk-accordion>

Flush

Add .accordion-flush to bk-accordio component to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
Flush
Item 1 content.
Item 2 content.
Item 3 content.
HTML
<bk-accordion class="accordion-flush">
   <bk-accordion-item header="Item 1">
       Item 1 content.
   </bk-accordion-item>
   <bk-accordion-item header="Item 2">
       Item 2 content.
   </bk-accordion-item>
   <bk-accordion-item header="Item 3">
       Item 3 content.
   </bk-accordion-item>
</bk-accordion>

Always open

Set mode="multiple" to allow multiple accordion items stay open.
Always open
Item 1 content.
Item 2 content.
Item 3 content.
HTML
<bk-accordion mode="multiple">
   <bk-accordion-item header="Item 1">
       Item 1 content.
   </bk-accordion-item>
   <bk-accordion-item header="Item 2">
       Item 2 content.
   </bk-accordion-item>
   <bk-accordion-item header="Item 3">
       Item 3 content.
   </bk-accordion-item>
</bk-accordion>