Go to homepage

Projects /

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.

FAQ Template
Check our new component library →

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.

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.