Accordion

Toggle the display of content sections.

This page shows some example usage of the <BsAccordion> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?

<BsAccordion as |acc|>
  <acc.item @value="1" @title="First item">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?  </p>
  </acc.item>
  <acc.item @value="2" as |aitem|>
    <aitem.title>
      <strong> Second </strong>
      <i> item </i>
    </aitem.title>
    <aitem.body>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?  </p>
    </aitem.body>
  </acc.item>
  <acc.item @value="3" @title="Third item">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?  </p>
  </acc.item>
</BsAccordion>

Customization

You can apply Bootstrap 4's utility classes to customize the look of the accordion's card items.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?

<BsAccordion as |acc|>
  <acc.item @value="1" @title="Border" class="border-dark">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?  </p>
  </acc.item>
  <acc.item @value="2" class="bg-dark" as |aitem|>
    <aitem.title>
      <span class="text-white"> Dark </span>
    </aitem.title>
    <aitem.body class="text-white">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?  </p>
    </aitem.body>
  </acc.item>
  <acc.item @value="3" class="bg-success" as |aitem|>
    <aitem.title>
      <span class="text-white"> Success </span>
    </aitem.title>
    <aitem.body class="text-white">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ea eos hic neque quia sequi sunt. Amet at atque corporis earum et fugiat illum magnam nisi sapiente voluptatem. Laudantium, quam?  </p>
    </aitem.body>
  </acc.item>
</BsAccordion>