Chances are that your project needs a help center section, with information to support your users such as contact info and frequently asked/answered questions. We put together an easy-to-customize template you can use to build your FAQ upon. It's responsive, powered by CSS and JavaScript, with support for devices with Javascript turned off.

👋 A new version of this component is available. Download now →.

Creating the structure

We wrapped the resource HTML into a .cd-faq section. The content is split into 2 main elements - .cd-faq__categories and .cd-faq__items - the first being the navigation and the second being the list of questions/answers. Each .cd-faq__group is an unordered list containing FAQ belonging to the same category/group.

<section class="cd-faq js-cd-faq container max-width-md margin-top-lg margin-bottom-lg">
  <ul class="cd-faq__categories">
    <li><a class="cd-faq__category cd-faq__category-selected truncate" href="#basics">Basics</a></li>
    <li><a class="cd-faq__category truncate" href="#mobile">Mobile</a></li>
    <li><!-- ... --></li>
    <!-- ... -->
  </ul> <!-- cd-faq__categories -->

  <div class="cd-faq__items">
    <ul id="basics" class="cd-faq__group">
      <li class="cd-faq__title"><h2>Basics</h2></li>
      <li class="cd-faq__item">
        <a class="cd-faq__trigger" href="#0"><span>How do I change my password?</span></a>
        <div class="cd-faq__content">
          <div class="text-component">
            <!-- content here -->
          </div>
        </div> <!-- cd-faq__content -->
      </li>

      <li class="cd-faq__item">
        <a class="cd-faq__trigger" href="#0"><span>How do I sign up?</span></a>
        <div class="cd-faq__content">
          <div class="text-component">
            <!-- content here -->
          </div>
        </div> <!-- cd-faq__content -->
      </li>

      <li class="cd-faq__item"><!-- ... --></li>

      <!-- ... -->
    </ul> <!-- cd-faq__group -->

    <ul id="mobile" class="cd-faq__group">
      <!-- ... -->
    </ul> <!-- cd-faq__group -->

    <!-- ... -->
  </div> <!-- cd-faq__items -->

  <a href="#0" class="cd-faq__close-panel text-replace">Close</a>

  <div class="cd-faq__overlay" aria-hidden="true"></div>
</section> <!-- cd-faq -->

Adding style

On small devices (window width smaller than 1024px), the faqs panel slides in from the right when the user selects one of the faq categories:

.cd-faq__items { // on mibile, faq contents slides in from the right
  position: fixed;
  height: 100%;
  width: 90%;
  top: 0;
  right: 0;
  transform: translateZ(0) translateX(100%);
  transition: transform .3s;
}

.cd-faq__items--slide-in {
  transform: translateX(0);
}

On bigger devices, we use CSS Flexbox to align the .cd-faq__categories and .cd-faq__items elements.

The faq categories has a sticky position so that it becomes fixed while user scrolls through the faq content:

@include breakpoint(md) {
  .cd-faq {
    display: flex;
  }

  .cd-faq__categories {
    position: sticky; // fix element on scrolling
    top: 20px;
    width: 200px;
  }

  .cd-faq__items {
    flex-grow: 1;
  }
}

Events handling

When user selects one of the faqs category from the .cd-faq__categories element, for viewport smaller than 1024px, we assign the .cd-faq__items--slide-in class to .cd-faq__items and the .cd-faq__group--selected class to the corresponding .cd-faq__group. 
For larger viewport, instead, the body smoothly scrolls down to the selected .cd-faq__group.