FAQ Template with CSS and jQuery

Category: Accordion, Content, Layouts 108 0

Download   Demo

This plugin is An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation. Powered by CSS and jQuery.

Creating the structure

We wrapped the resource HTML into a .cd-faq section. The content is split into 2 main divs – .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.

Adding style

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 .no-js class to make this nugget compatible with devices with no support for javascript (or for devices whose javascript has been turned off by the user).

The way this class works is: we assign it to the <html> element. Modernizr removes this class and assign a .js class instead. You get the point: if Modernizr is not working – hence javascript is not working – you can use the .no-js class to make your content accessible (i.e. if you hid an element by default – making it visible on click with javascript, you can override its style and make sure it’s always accessible). Or the other way around: you can use the .js class assigned by Modernizr to progressively enhance your website.

As Jeremy Keith wisely points out: “You begin with your content, then you layer on your presentation using CSS and then you layer on your behaviour using JavaScript. And hopefully you’ll recognise this stack as the idea of progressive enhancement on the web”.

Events handling

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 .cd-faq-group.

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.

Related Articles

Add Comment