Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Read the official Bootstrap Documentation for a full list of instructions and other options.


Basic Accordion

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion.

Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.

Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.

Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish cookie caramels muffin.
<div class="accordion" id="accordionExample">
  <div class="accordion-item active">
    <h2 class="accordion-header" id="headingOne">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne" role="tabpanel">
        Accordion Item 1
      </button>
    </h2>

    <div id="accordionOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
        bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
        marshmallow pastry pie.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo" role="tabpanel">
        Accordion Item 2
      </button>
    </h2>
    <div id="accordionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
        cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes
        carrot cake. Fruitcake chocolate chupa chups.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree" role="tabpanel">
        Accordion Item 3
      </button>
    </h2>
    <div id="accordionThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
        marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream
        wafer danish cookie caramels muffin.
      </div>
    </div>
  </div>
</div>

Accordion without Arrow

For accordion without arrow, use .accordion-without-arrow class with .accordion class.

Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.

Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.

Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish cookie caramels muffin.
<div id="accordionIcon" class="accordion accordion-without-arrow">
  <div class="accordion-item">
    <h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconOne">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-1" aria-controls="accordionIcon-1">
        Accordion Item 1
      </button>
    </h2>

    <div id="accordionIcon-1" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
      <div class="accordion-body">
        Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
        bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears
        marshmallow pastry pie.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-2" aria-controls="accordionIcon-2">
        Accordion Item 2
      </button>
    </h2>
    <div id="accordionIcon-2" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
      <div class="accordion-body">
        Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
        cream
        halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot
        cake.
        Fruitcake chocolate chupa chups.
      </div>
    </div>
  </div>

  <div class="accordion-item active">
    <h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconThree">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionIcon-3" aria-expanded="true" aria-controls="accordionIcon-3" role="tabpanel">
        Accordion Item 3
      </button>
    </h2>
    <div id="accordionIcon-3" class="accordion-collapse collapse show" data-bs-parent="#accordionIcon">
      <div class="accordion-body">
        Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
        marshmallow
        sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish
        cookie caramels muffin.
      </div>
    </div>
  </div>
</div>
Class Description
class="accordion-without-arrow" Use this class with .accordion class for accordion without arrows.

Customized Accordion

For accordion custom button, use .accordion-custom-button class with .accordion class.

Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé.

Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies.

Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels.
<div class="accordion accordion-custom-button mt-3" id="accordionCustom">
  <div class="accordion-item active">
    <h2 class="accordion-header" id="headingCustomOne">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionCustomOne" aria-expanded="true" aria-controls="accordionCustomOne">
        Accordion Item 1
      </button>
    </h2>

    <div id="accordionCustomOne" class="accordion-collapse collapse show" aria-labelledby="headingCustomOne" data-bs-parent="#accordionCustom">
      <div class="accordion-body">
        Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi
        bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingCustomTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionCustomTwo" aria-expanded="false" aria-controls="accordionCustomTwo">
        Accordion Item 2
      </button>
    </h2>
    <div id="accordionCustomTwo" class="accordion-collapse collapse" aria-labelledby="headingCustomTwo" data-bs-parent="#accordionCustom">
      <div class="accordion-body">
        Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice
        cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingCustomThree">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionCustomThree" aria-expanded="false" aria-controls="accordionCustomThree">
        Accordion Item 3
      </button>
    </h2>
    <div id="accordionCustomThree" class="accordion-collapse collapse" aria-labelledby="headingCustomThree" data-bs-parent="#accordionCustom">
      <div class="accordion-body">
        Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread
        marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels.
      </div>
    </div>
  </div>
</div>
Class Description
class="accordion-custom-button" Use this class with .accordion class for accordion Popout.
© 2017- ThemeSelection, Hand-crafted & Made with ❤️