Accordion

Accordions are vertically collapsible components that contain content inside, they come in handy for a lot of situations as an example the list of FAQ or small screen devices submenus.

A simple accordion

To create an accordion check the below example out, you need to create an exact structure that can be customized easily.

Toggle plus icon

We use the add button component to have an interactive plus icon, which changes when the accordion item is opened.

Accessibility matters!

To have an accessible accordion you need to have a proper structure and set a couple of HTML attributes.

The element with the .accordion-toggle class toggles the accordion items, so it must have aria-expanded="false" as default, JavaScript changes it to true when the user clicks on the button.
Furthermore aria-controls="ACCORDION-COLLAPSE-ID" is required to set the id of the .accordion-collapse element, simply it connects accordion item content with the toggle button.

index.html

<div class="accordion">
  <!-- First accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1">
        Lorem ipsum dolor sit amet
        <span class="add-button"></span>
      </button>
    </h2>
    <div id="accordion-1" class="accordion-collapse">
      <div class="accordion-body">Lorem ipsum dolor sit amet consectetur ...</div>
    </div>
  </div>

  <!-- Second accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2">
        Far far away
        <span class="add-button"></span>
      </button>
    </h2>
    <div id="accordion-2" class="accordion-collapse">
      <div class="accordion-body">Far far away, behind the word mountains ...</div>
    </div>
  </div>

  <!-- Third accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2">
        The Sorrows of Young Werther
        <span class="add-button"></span>
      </button>
    </h2>
    <div id="accordion-2" class="accordion-collapse">
      <div class="accordion-body">
        <h3 class="size-lg">Book I</h3>
        A wonderful serenity has taken possession of my entire soul...
      </div>
    </div>
  </div>
</div>

Bordered

The default accordion does not have borders and it can be flexible to be customized but if you need more of an accordion with accordion style just add the .bordered class to the .accordion element.

index.html

<div class="accordion bordered">...</div>

Expendable

As we call it "accordion" there must not be more than one item expanded item at a time. However, you can break the limit by adding the .expendable class to the .accordion element.

index.html

<div class="accordion bordered expendable">...</div>

Sizes

To change the accordion size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="accordion bordered size-sm">...</div>
<div class="accordion bordered size-lg">...</div>
<div class="accordion bordered size-2x">...</div>

Color

There are helper classes for styling elements like accordions, first read about color setter classes for having button with diffrent background and text color. You can add the class to the .accordion or style each item individualy by adding it to the .accordion-item element.

index.html

<!-- style the whole accordion -->
<div class="accordion bordered style-dark">...</div>

<!-- style each accordion item -->
<div class="accordion bordered">
  <div class="accordion-item style-red">...</div>
  <div class="accordion-item style-orange">...</div>
  <div class="accordion-item style-yellow">...</div>
</div>

Animations

There are two types of animation for each accordion item: show and hide.
The show animation is triggered when the item is expanded and the hide animation is triggered when the item is going to be collapsed. The default animation is blow in/out, also by adding the .fade-animation class to the .accordion element, you can simplify it to fade in/out.

Here are the CSS variables that you can change the duration with:
--flatify__accordion-animation-show-duration
--flatify__accordion-animation-hide-duration

or define a custom animation:
--flatify__accordion-animation-show
--flatify__accordion-animation-hide

The default animation is set to fade in and fade out, the predefined animations of FlatifyCSS.

Here is an example of changing the animations:

index.html

<div class="accordion bordered my-custom-animation">...</div>

style.css

.my-custom-animation {
  --flatify__accordion-animation-show: flatify-blow-in 0.5s 0.2s;
  --flatify__accordion-animation-hide: flatify-blow-out 0.5s;
}

Do not use none for animations!

Never use none for these kinds of animations, because FlatifyCSS JavaScript listens to animationend event, so if you set none there won't be an animation, it means animationend is not going to be triggered. If you want to disable an animation just set animation-duration to 0s.
The example could be:

style.css

.no-animation-accordion {
  --flatify__accordion-animation-show: flatify-fade-in 0s;
  --flatify__accordion-animation-hide: flatify-fade-out 0s;
}

Customization

More than customizing animations there are CSS variables to change the base colors of accordions:

--flatify__accordion-txt-color
--flatify__accordion-bg-color
--flatify__accordion-border-color

index.html

<div class="accordion bordered custom-accordion">...</div>

style.css

.custom-accordion {
  --flatify__accordion-txt-color: #f5f7fa;
  --flatify__accordion-bg-color: #aa8e69;
  --flatify__accordion-border-color: #f6bb42;
}