FAQ Template

FAQ Template

An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.

👉 Important: this experiment is built upon the CodyHouse Framework.

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.

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 container--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.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news