Accordion

Build vertically collapsing accordions with an integrated JS module.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

Examples

The following examples show how to implement the accordion with minimal code.

Basic Example

Text block 1

Text block 2

Text block 3

Astro file

---
const data: AccordionDataType[] = [
  { header: 'Title 1', body: 'Text block 1', show: true },
  { header: 'Title 2', body: 'Text block 2' },
  { header: 'Title 3', body: 'Text block 3' },
];

import { Accordion } from 'astro-bootstrap';
import type { AccordionDataType } from 'astro-bootstrap';
---

<Accordion data={data} />

Fully Collapsed State

If you want your Accordion to start in a fully-collapsed state, then simply don’t add a show: true prop to any of the data elements.

Text block 1

Text block 2

Text block 3

Astro file

---
const data: AccordionDataType[] = [
  { header: 'Title 1', body: 'Text block 1',},
  { header: 'Title 2', body: 'Text block 2' },
  { header: 'Title 3', body: 'Text block 3' },
];

import { Accordion } from 'astro-bootstrap';
import type { AccordionDataType } from 'astro-bootstrap';
---

<Accordion data={data} />

Flush

Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Text block 1

Text block 2

Text block 3

Astro file

---
const data: AccordionDataType[] = [
  { header: 'Title 1', body: 'Text block 1' },
  { header: 'Title 2', body: 'Text block 2' },
  { header: 'Title 3', body: 'Text block 3' },
];

import { Accordion } from 'astro-bootstrap';
import type { AccordionDataType } from 'astro-bootstrap';
---

<Accordion data={data} flush />

Always open

You can make accordion items stay open when another item is opened by using the alwaysOpen prop. If you’re looking to control the component, you must use an array of strings for activeKey or defaultActiveKey.

Text block 1

Text block 2

Text block 3

Astro file

---
const data: AccordionDataType [] = [
  { header: 'Title 1', body: 'Text block 1', show: true, wrong: 'custom'},
  { header: 'Title 2', body: 'Text block 2' },
  { header: 'Title 3', body: 'Text block 3' },
];

import { Accordion } from 'astro-bootstrap';
import type { AccordionDataType } from 'astro-bootstrap';
---

<Accordion data={data} alwaysOpen/>

Set ID and classes

The following properties are available:

id to add an id to the parent accordion div.
class to append a class to the parent accordion div.
itemClass to append a class to the accordion-item div.
headerClass to append a class to the accordion-header div.
bodyClass to append a class to the accordion-body div.

Text block 1

Text block 2

Text block 3

Astro file

---
const data: AccordionDataType[] = [
  { header: 'Title 1', body: 'Text block 1', show: true },
  { header: 'Title 2', body: 'Text block 2' },
  { header: 'Title 3', body: 'Text block 3' },
];

import { Accordion } from 'astro-bootstrap';
import type { AccordionDataType } from 'astro-bootstrap';
---

<Accordion
  {data}
  id="accordion-1"
  class="accordion-class"
  itemClass="accordion-item-class"
  headerClass="accordion-header-class"
  bodyClass="accordionBodyClass"
/>

Manual Usage

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Astro file

---
import { Accordion } from 'astro-bootstrap';
const id = 'manualAccordion'
---

<Accordion id={id}>
  <Accordion.Item>
    <Accordion.Header parent={id} index={0}>Accordion Item #1</Accordion.Header>
    <Accordion.Body parent={id} index={0} show>
      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header parent={id} index={1}>Accordion Item #2</Accordion.Header>
    <Accordion.Body parent={id} index={1}>
      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header parent={id} index={2}>Accordion Item #3</Accordion.Header>
    <Accordion.Body parent={id} index={2}>
      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

No components

Astro file

---
const items = [
  { header: 'Title 1', body: 'Text block 1', show: true },
  { header: 'Title 2', body: 'Text block 2' },
  { header: 'Title 3', body: 'Text block 3' },
];
const accordionId = 'accordionExample';
---

<div class="accordion" id={accordionId}>
{
  items.map((item, index: number) => {
    <div class="accordion-item">
      <h2 class="accordion-header" id={`heading-${index}`}>
        <button
          class="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target={`collapse-${index}`}
          aria-expanded="true"
          aria-controls={`collapse-${index}`}
        >
          {item.header}
        </button>
      </h2>
      <div
        id={`collapse-${index}`}
        class={`accordion-collapse collapse ${item.show}`}
        aria-labelledby={`heading-${index}`}
        data-bs-parent={`#${accordionId}`}
      >
        <div class="accordion-body">{item.body}</div>
      </div>
    </div>;
  })
}
</div>
<script>
  import 'bootstrap/js/dist/collapse';
</script>

API

Accordion

import { Accordion } from 'astro-bootstrap'

Name	Type	Default	Description
data ^required	{ header: string; body: string; show?: boolean;}[]		Data to display in accordion, including the `show` property.
flush	boolean	`false`	Adds the 'accordion-flush' class to the accordion.
alwaysOpen	boolean	`false`	Prevents Accordion Items from closing when another one is opened
id	string	`null`	Set the `id` on the `accordion` div.
class	string	`null`	Appends a class to the `accordion` div.
itemClass	string	`null`	Appends a class to the `accordion-item` div.
headerClass	string	`null`	Appends a class to the `accordion-header` div.
bodyClass	string	`null`	Appends a class to the `accordion-body` div.