An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.
Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!
Creating the structure
We wrapped the resource HTML into a
.cd-faq section. The content is split into 2 main divs -
.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"> <ul class="cd-faq-categories"> <li><a href="#basics">Basics</a></li> <li><a href="#mobile">Mobile</a></li> <li><!-- ... --></li> </ul> <div class="cd-faq-items"> <ul id="basics" class="cd-faq-group"> <li class="cd-faq-title"><h2>Basics</h2></li> <li> <a class="cd-faq-trigger" href="#0">How do I change my password?</a> <div class="cd-faq-content"> <!-- content here --> </div> </li> <li> <a class="cd-faq-trigger" href="#0">How do I sign up?</a> <div class="cd-faq-content"> <!-- content here --> </div> </li> <li><!-- ... --></li> </ul> <ul id="mobile" class="cd-faq-group"> <!-- ... --> </ul> <!-- ... --> </div> </section>
The CSS is pretty simple, you can download the source file and check yourself. I added comments to the 'tricky' parts as well. One thing I'd like to point out though: we used the
The way this class works is: we assign it to the
<html> element. Modernizr removes this class and assign a
.js class assigned by Modernizr to progressively enhance your website.
When user selects one of the faqs category from the
.cd-faq-categories element, for viewport smaller than 768px (MqM variable defined in the main.js file), we assign the
.slide-in class to
.cd-faq-items and the
.selected class to the corresponding
.cd-faq-group. We have been using jQuery mobile to enable the swipe event to close the slide-in panel.
For larger viewport, instead, the body smoothly scrolls down to the selected
When the viewport is larger than 1024px (MqL variable defined in the main.js file), we bind the
updateCategory() function to the window scroll event. This functon checks the
$(window).scrollTop() value and, if user has scrolled more than the
.cd-faq offset top, assigns a
position: fixed to the
.cd-faq-categories element, so that it's still visible while scrolling through the faqs.