Skip to content

Accordion

Guidelines

The Desktop Accordion Component for FAQ sections organizes frequently asked questions into collapsible sections. Each section to reveal the answer when clicked, providing users with an efficient way to access information without overwhelming the interface.

Class

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


States

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Code

    .accordion {
      width: 100%;
      box-sizing: border-box;
      border-bottom: 2px solid $color-old-green;
    }

    .panel {
      font-size: 16px;
      padding: 0px 12px 16px;
    }

    .accordion-button {
      font-size: 24px;
      color: $color-black;
      cursor: pointer;
      width: 100%;
      height: 64px;
      text-align: left;
      border: none;
      outline: none;
      padding: 24px 20px 0px;
      margin-bottom: 24px;
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      font-family: 'Roboto SemiBold';

      @include respond-to('medium') {
        font-size: 20px;
        height: 44px;
        padding: 16px 12px 0px;
        margin-bottom: 16px;
      }
    }

    .accordion .panel {
      padding: 0px 20px 24px;
      display: none;
      overflow: hidden;

      @include respond-to('medium') {
        font-size: 16px;
        padding: 0px 12px 16px;
      } 
    }

    .accordion-button.active + .panel {
      display: block;
      text-align: left;
    }

    .accordion .accordion-button {
      &.active {
        margin-bottom: 16px;
      }

      & span {
        line-height: 40px;

        @include respond-to('medium') {
          line-height: 26px;
        }
      }
      & .twemoji {
        color: $color-old-green;
        --md-icon-size: 1.75em;
        margin: auto 0;
      }
      &:not(.active) .open {
        display:none;
      }
      &.active .close {
        display: none;
      }
    }

    .accordion.mobile {
      & .accordion-button{
        font-size: 20px;
        height: 44px;
        padding: 16px 12px 0px;
        margin-bottom: 16px;
      }

      .panel {
        font-size: 16px;
        padding: 0px 12px 16px;
      }

      & span {
        line-height: 26px;
      }
    }

<div class="accordion">
    <button class="accordion-button">
        <span class='accordion-title'>Accordion Title</span>
        :material-chevron-up:{ .open }
        :material-chevron-down:{ .close }
    </button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


States

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    .accordion {
      width: 100%;
      box-sizing: border-box;
      border-bottom: 2px solid $color-old-green;
    }

    .panel {
      font-size: 16px;
      padding: 0px 12px 16px;
    }

    .accordion-button {
      font-size: 24px;
      color: $color-black;
      cursor: pointer;
      width: 100%;
      height: 64px;
      text-align: left;
      border: none;
      outline: none;
      padding: 24px 20px 0px;
      margin-bottom: 24px;
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      font-family: 'Roboto SemiBold';

      @include respond-to('medium') {
        font-size: 20px;
        height: 44px;
        padding: 16px 12px 0px;
        margin-bottom: 16px;
      }
    }

    .accordion .panel {
      padding: 0px 20px 24px;
      display: none;
      overflow: hidden;

      @include respond-to('medium') {
        font-size: 16px;
        padding: 0px 12px 16px;
      } 
    }

    .accordion-button.active + .panel {
      display: block;
      text-align: left;
    }

    .accordion .accordion-button {
      &.active {
        margin-bottom: 16px;
      }

      & span {
        line-height: 40px;

        @include respond-to('medium') {
          line-height: 26px;
        }
      }
      & .twemoji {
        color: $color-old-green;
        --md-icon-size: 1.75em;
        margin: auto 0;
      }
      &:not(.active) .open {
        display:none;
      }
      &.active .close {
        display: none;
      }
    }

    .accordion.mobile {
      & .accordion-button{
        font-size: 20px;
        height: 44px;
        padding: 16px 12px 0px;
        margin-bottom: 16px;
      }

      .panel {
        font-size: 16px;
        padding: 0px 12px 16px;
      }

      & span {
        line-height: 26px;
      }
    }

<div class="accordion">
    <button class="accordion-button">
        <span class='accordion-title'>Accordion Title</span>
        :material-chevron-up:{ .open }
        :material-chevron-down:{ .close }
    </button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>