Materialize bootstrap Dashboard by Pixinvent

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 the collapse component internally to make it collapsible. To display an accordion that’s expanded by default, add the .show class to the .accordion-collapse element.
Additionally, JavaScript is used to add the active class inside the .accordion-item element to apply extra CSS to the active item.

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">
        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">
        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">
        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>

// Function to toggle active class
const accordionActiveFunction = function (e) {
  if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
    e.target.closest('.accordion-item').classList.add('active');
  } else {
    e.target.closest('.accordion-item').classList.remove('active');
  }
};

const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
  accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
  accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
});

Accordion without Arrow

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

Preview
HTML

<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 previous-active">
    <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">
        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.

Accordion Popout

For popout accordion, use .accordion-popout class with .accordion class.

Preview
HTML

<div id="accordionPopoutIcon" class="accordion accordion-popout">
  <div class="accordion-item card">
    <h2 class="accordion-header text-body d-flex justify-content-between" id="accordionPopoutIconOne">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionPopoutIcon-1" aria-controls="accordionPopoutIcon-1">
        Accordion Item 1
      </button>
    </h2>

    <div id="accordionPopoutIcon-1" class="accordion-collapse collapse" data-bs-parent="#accordionPopoutIcon">
      <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 card">
    <h2 class="accordion-header text-body d-flex justify-content-between" id="accordionPopoutIconTwo">
      <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionPopoutIcon-2" aria-controls="accordionPopoutIcon-2">
        Accordion Item 2
      </button>
    </h2>
    <div id="accordionPopoutIcon-2" class="accordion-collapse collapse" data-bs-parent="#accordionPopoutIcon">
      <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 card active">
    <h2 class="accordion-header text-body d-flex justify-content-between" id="accordionPopoutIconThree">
      <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionPopoutIcon-3" aria-expanded="true" aria-controls="accordionPopoutIcon-3" role="tabpanel">
        Accordion Item 3
      </button>
    </h2>
    <div id="accordionPopoutIcon-3" class="accordion-collapse collapse show" data-bs-parent="#accordionPopoutIcon">
      <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-popout"`	Use this class with `.accordion` class for accordion popout.

Advance Stylings

Advance color styling options like heading color, border, outline accordion, solid color accordion and accordion with Icon.

Accordion With Icon (Always Open)

To add icon before the Accordion header.

Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

Preview
HTML

<div class="accordion" id="accordionWithIcon">
  <div class="accordion-item active">
    <h2 class="accordion-header d-flex align-items-center">
      <button
        type="button"
        class="accordion-button"
        data-bs-toggle="collapse"
        data-bs-target="#accordionWithIcon-1"
        aria-expanded="true">
        <i class="icon-base ri ri-bar-chart-2-line me-2"></i>
        Header Option 1
      </button>
    </h2>

    <div id="accordionWithIcon-1" class="accordion-collapse collapse show">
      <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 d-flex align-items-center">
      <button
        type="button"
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#accordionWithIcon-2"
        aria-expanded="false">
        <i class="icon-base ri ri-briefcase-line me-2"></i>
        Header Option 2
      </button>
    </h2>
    <div id="accordionWithIcon-2" class="accordion-collapse collapse">
      <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 d-flex align-items-center">
      <button
        type="button"
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#accordionWithIcon-3"
        aria-expanded="false">
        <i class="icon-base ri ri-gift-line me-2"></i>
        Header Option 3
      </button>
    </h2>
    <div id="accordionWithIcon-3" class="accordion-collapse collapse">
      <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 Header Color

This class will add header text color to open accordion card.

<div class="accordion accordion-header-primary" id="accordionStyle1">
<div class="accordion-item">
  <h2 class="accordion-header">
    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-1" aria-expanded="false">
      Header Option 1
    </button>
  </h2>

  <div id="accordionStyle1-1" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
    <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 previous-active">
  <h2 class="accordion-header">
    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-2" aria-expanded="false">
      Header Option 2
    </button>
  </h2>
  <div id="accordionStyle1-2" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
    <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">
    <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-3" aria-expanded="true">
      Header Option 3
    </button>
  </h2>
  <div id="accordionStyle1-3" class="accordion-collapse collapse show" data-bs-parent="#accordionStyle1">
    <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-header-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

Here is header color accordion mixin which allow you to easily create header color accordion style by adding your own class and colors.

@each $state in map-keys($theme-colors) {
  .accordion-header-#{$state} {
    --#{$prefix}accordion-active-color: var(--#{$prefix}#{$state});
  }
}

Accordion With Custom Button

implementing unique icons for the open and close for accordion.

Preview
HTML

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-header-primary" id="accordionStyle1">
<div class="accordion-item">
  <h2 class="accordion-header">
    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-1" aria-expanded="false">
      Header Option 1
    </button>
  </h2>

  <div id="accordionStyle1-1" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
    <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 previous-active">
  <h2 class="accordion-header">
    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-2" aria-expanded="false">
      Header Option 2
    </button>
  </h2>
  <div id="accordionStyle1-2" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
    <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">
    <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-3" aria-expanded="true">
      Header Option 3
    </button>
  </h2>
  <div id="accordionStyle1-3" class="accordion-collapse collapse show" data-bs-parent="#accordionStyle1">
    <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-header-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

Here is header color accordion mixin which allow you to easily create header color accordion style by adding your own class and colors.

.accordion-custom-button {
      .accordion-button::after {
        --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-custom-button-icon-dark)};
        --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-custom-button-active-icon-dark)};
      }
    }