Download
User Rating: 0/5 ( 0 votes)
FAQ Template is an easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.
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 jQuery, with support for devices with Javascript turned off.
Source: codyhouse.co
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
2. HTML
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.
<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>
3. 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
4. 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.
JS Tutorial
