FAQ template
October 2, 2014 | 78 Feedbacks

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.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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.

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.

Changelog

Oct 11 2014
  • Fixed bug on Firefox - faq panel not closing on mobile - by CodyHouse
  • Fixed bug - category panel scrolling if additional content is available after the faqs - by CodyHouse
Oct 3, 2014
  • Added close button on panel - mobile by CodyHouse
Oct 2, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • http://huphtur.nl/ huphtur

    Nice, but could perhaps use some proper anchors so people can link directly to a specific content item?

    • Flip4Bytes

      At the very least you can just take the ID of the section and link to a particular section if you’d like:

      e.g. http://codyhouse.co/demo/faq-template/index.html#mobile

      I feel like it’d be quite a bit of work to make it so a link brings you to a particular item within the section and show the section upon clicking.

  • http://www.awsmlabs.com Chad Allen

    Great work Sebastiano. I love how the questions consolidate into the category. It does look like you have forgotten a method to close the off screen FAQ on small devices.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Chad, You can swipe to close. I wanted to put a “Close” or “X” somewhere, then thought maybe users expect to just swipe to close panels on mobile devices (you can even click on the semi-transparent layer to close the panel)

      • Luca Nardi

        The swipe solution is smart (well, at least swiping was the very first thing I tried not seeing a close button) but it’s half broken on Windows Phone 8.1, where swiping rightward is used as a history.back() gesture. Users are forced to swipe, wait holding for the FAQ drawer to close and then swipe back to avoid history navigation. So all in all I’d probably include a close button somewhere in the drawer just in case.

        • http://codyhouse.co/ Sebastiano Guerriero

          I see, I haven’t tested on a Windows Phone, but seems like an X button is necessary. I’ll update the resource soon, thanks for the feedback ;)

  • Isabelle

    Awesome and inspiring! Thanks

  • Deryck Henson

    @seguerriero:disqus what would you think about adding a search input on the template? I know it’s just a demo to start a project from but it could give people a good idea of how to fit and size an input on a page like this. I always picture something like the elasticsearch.org/guide top search box when imagining a page structured this way.

    It’s a great post either way you go, of course. Thanks for sharing!

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Deryck, In the initial version I created a search form as well. Then I decided to remove it because it didn’t make a lot of sense to work on the backend too (considering the nature of our resources). But, as you’re suggesting, it could be useful to add it and work only on the style, leaving the users with the freedom to implement the back end code to make it work. Noted ;)

  • sudeep

    awesome …… work done Guerriero Thanks for sharing ….

  • imran khan

    It’s a awesome work. Keep going. Wish you all the best.

  • qbonszone

    Hello , just want to know.Is that okay if i using this FAQ template as documentation media for my themes which i sale on marketplace ? thanks for this awesome tools :)

  • http://webentwicklungrostock.de Michael Pehl

    Would love to see a Foundation version :)

  • kupcza

    Hey, good job. But I have problem with closing FAQ item on mobile version (tested on resizec desktop version). There’s just link to #0, but nothing happens

    • http://webentwicklungrostock.de Michael Pehl

      Closing on mobile can be done with the “X” or by swiping… works fine on my HTC One M8 and LG G3

      • kupcza

        Yup, on mobile device it’s OK (iP5s). As I said, I tried this on my resized desktop browser and I was not able to close opened FAQ.

        • http://codyhouse.co/ Sebastiano Guerriero

          what browser are you using, and which os?

          • kupcza

            OSX 10.9 – FF 32.0.3. On Chrome works fine. On safari it’s ok too.

          • Josh

            Confirmed… on FF 32.0.3, Windows 7, clicking the X on the mobile view does not close the off-canvas window. Error is below:

            Timestamp: 10/10/2014 8:55:37 AM
            Error: ReferenceError: event is not defined
            Source File: http://codyhouse.co/demo/faq-template/js/main.js
            Line: 68

        • http://codyhouse.co Claudia Romano

          @joshdbrown:disqus @kupcza:disqus fixed! ;)

  • Chris Carpenter

    If you are scrolling down and then go up and down very quickly the LHS menu creeps over the FAQ content. I’m using Safari 7.1 on Mavericks

    • http://codyhouse.co Claudia Romano

      Hi Chris, I’m trying to recreate the bug with no success. Do you think you can provide more info (like a screenshot or something similar). Thanks!

  • stef245

    Hey guys!! Your demos are amazing..I am very happy I discovered your site. I have a quick question: On Internet Explorer 9, when the viewport is smaller than 768px, the faq slide-in panel automatically appears with no content and there is no way to close it. Any ideas how to fix this?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi @stef245:disqus! I don’t think any user will ever use ie9 at that resolution. I mean: ie9 should not be supported by any mobile device or tablet, it’s only on laptop and pc.

      • stef245

        Thanks for your quick reply Sebastiano!! Keep up the good work !!

  • clloyd

    hi sebastiano…possible to change the slide in to a push over effect when the screen is smaller than 768px?…so it doesn’t slide over the existing content, but rather pushing the existing content off canvas to the left.

    • http://codyhouse.co/ Sebastiano Guerriero

      Yes def. You should create a class and add it to the main content (using jQuery) when the faqs section is visible (the class should contain something like transform: translateX(faqWidthpx)). You can check how we did here:

      http://codyhouse.co/demo/mega-site-navigation/index.html

  • Luca Grezzi

    Hi Sebastiano,

    Great work!! Thanks for share it :)

    I wanted to ask how was possible to make sure that an item of faq remain open by default while others closed.

    I tried so but it does not work, while using only content remains open by default but lose the correct formatting.

    Is possible change the behavior in this way?

    Thanks again

    • http://codyhouse.co Claudia Romano

      Hi Luca, glad you liked it! ;)
      The .content-visible class is used to change the arrow direction (you have to assign it to the faq list item and not to the div item), and a display: block is set for the corresponding .cd-faq-content element (we have been using the jQuery slide method). Hope this helps!

  • Joe Lehnerd

    Hello. I am not a developer. Your FAQ template looks very good. I think I would like it for my website. I would like to hire somebody to install it on my website. My question is after it is installed, how much flexibility do I have as a user? Without writing code, can I add or delete categories? Is there a limit on the number of categories? Can I change colors of the boxes and fonts? Thank you.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! You’ll need some basic CSS understanding to make changes (i.e. to change colors and fonts). Unless your developers is gonna create a CMS that lets you update style without the need to jump into the code.

  • Đình Lâm

    Nice script,
    How to collapse the previous question when I click on the other question?
    Thank you

    • http://codyhouse.co Claudia Romano

      Hi Dinh, in order to collapse the other questions, you need to remove the content-visible class from the open list items and slide-up the corresponding .cd-faq-content elements. Hope this helps!

      • Đình Lâm

        Should I update file main.js in here (I don’t know how to update for close others)
        faqTrigger.on(‘click’, function(event){
        event.preventDefault();
        $(this).next(‘.cd-faq-content’).slideToggle(200).end().parent(‘li’).toggleClass(‘content-visible’);
        });

        please help me, many thanks

        • Nirav

          Hi Dinh,
          How did you fix that ..?Where did you make changes on Code.?
          Can you guide me please..
          Thank You

          • Đình Lâm

            Hi Nirav,
            In file main.js (line from 51, 52), edit as:
            //show faq content clicking on faqTrigger
            faqTrigger.on(‘click’, function(event){
            event.preventDefault();
            $(‘.cd-faq-content’).hide(200);
            $(this).next(‘.cd-faq-content’).slideToggle(200).end().parent(‘li’).toggleClass(‘content-visible’);
            });

          • Jens vanhooydonck

            Changed it to this:

            //show faq content clicking on faqTrigger
            faqTrigger.on(‘click’, function(event){
            event.preventDefault();
            if (!$(this).next(‘.cd-faq-content’).parent(‘li’).hasClass(‘content-visible’) ){
            $(‘.cd-faq-content’).hide(200);
            }
            $(this).next(‘.cd-faq-content’).slideToggle(200).end().parent(‘li’).toggleClass(‘content-visible’);
            });

            So when the FAQ content is already open, it just closes.

          • JustinDemmers

            Both above functions leave the class ‘content-visible’ on all clicked questions making it bug when opening and closing different questions. If anyone has a solution that would be great :)

  • Elsa

    Thanks for the script,

    but i put it in page and also added js files, but it dont seems to work

  • santosh

    thanks for sharing this template it is extremely useful it works fine on other browser IE9 and IE10 but it is not working on IE11 any suggestions

    • http://codyhouse.co/ Sebastiano Guerriero

      do you have a screenshot and info about your os?

  • Nirav

    Thank you. It is really very helpful template.
    How to close Previous Question when Click on the other question.?
    Where do I make changes on code.?

  • http://kaberco.com/ Ali Master

    Thank you for writing and sharing

  • http://kaberco.com/ Ali Master

    are you design rtl direction that template?

  • http://www.genitoririvarolo.org/ Genitori Istituto Comprensivo

    Great work! But there is a problem when FAQ of the latest categories are few (one or two): the page scrolls in the right way, but the highlight category is wrong. How to solve, without add empty space at the end of faq list?
    Thanks in advance and sorry for my bad english :(

    • MuraNava

      would be interested in any solutions to this

      thanks

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! unfortunately there’s no trick to solve this issue. You should have additional content/space below the last faq item, otherwise the page simply can’t scroll further.

    • Eli McArthur

      Post a div with a bunch of breaks at the end of the page. i.e. “…”

      This adds extra space below your last item and allows you to scroll down all the way. Add or subtract lines () as needed.

  • Nitin

    This is awesome, I just have a query which might help me in resolving an issue I’m facing right now! What would the following section do?

    *::after, *::before {
    content: ”;
    }

    If I remove this altogether, the icons – toggle, close panel, ‘+’ are gone but if I include it then they do appear but the rest of the UI (navbar, footer, search button on that page) are distorted. For the life of me I cannot seem to isolate this behavior to only the faq section. Any pointers would be extremely helpful!

    • http://codyhouse.co Claudia Romano

      Hi, you need to set a content for ::after and ::before pseudo-elements otherwise they won’t be displayed. But you can target only the ones you need (e.g., .cd-faq-trigger::after, .cd-faq-trigger::before, …) Hope this helps!

      • Nitin

        Thanks @claudiarrromano:disqus it was really helpful, applying it to the selected elements did the trick for me!

  • mrc

    because of: box-sizing: border-box; I would do .cd-faq-items{width:100%;}

  • TGS

    Thanks for the amazing work. I have one problem that I could not solve in the last 2 hours. The selection in the grey box is fully working but the green vertical bar is not moving to the last two boxes. I have in total 7 categories and when I click on the last two ones it always highlights the 5th. The right content is shown. It’s just optically very unprofessional. I would appreciate a solution. Thank you!

  • Yan Cheng Cheok

    Hey, thanks for creating such beautiful FAQ template. Usually, when we receive common question from customer, we prefer to give single direct link to them, for them to read through the answer section. May I know, what is a better way for us to pass a hash tag as URL suffix, and the page will automatically scroll to and expand the desired section (For mobile case, it will be slide out from right, then scroll to the desired section)?

    • http://codyhouse.co/ Sebastiano Guerriero

      you can try by assigning an id to each list item inside the .cd-faq-group, then use javascript to make sure the class .content-visible is applied to the list item/answer the user is looking for from another page

      • Yan Cheng Cheok

        Thanks for the respond. Will going to try that out.

        I realize is the FAQ list is short, it doesn’t work perfectly under desktop (It is working fine in Mobile). In desktop, when I click on the left menu, I expect the green highlight vertical bar, will move to the place I click. However, the green bar doesn’t move, unless I make my desktop browser height small enough.

        Is this design by intention? Or, there’s a bug in my code?

        An example is http://faq.jstock.co/

    • Abinandhanan Sripal Udhaykumar

      Hey! did you arrive at a solution for this? I’m looking for the same query here. Any help will be appreciated :)

  • Lil

    Thanks for this awesome template! I’m using Mac OS X 10.10.3 with Safari 8.0.6 and am finding the slide-in screen on reduced size screen is greyed out. I can see there is text there but it is obscured and unreadable. The same happens on my iPhone 3 which has the default Safari browser installed. Is there a workaround for this? Any advice greatly appreciated.

    • http://codyhouse.co Claudia Romano

      Hi Lil, glad you like it!
      I just tested our demo on Safari 8.0.6 (mobile version) and it’s working fine. Are you experiencing this issue with our demo or on a local version? In that case, make sure the background color you’re using for the slide-in panel is correct (and not overwritten by additional css code). Thank you!

      • Lil

        Hi Claudia, thank you so much for your response. It probably is a CSS conflict because I’m installing it into a template which I’ve adapted for my project and it has quite a lot of css files with it. It is working great when I test it in Chrome and your demo works for me in Safari too. Hopefully I can establish the conflict, thank you for the hint about background color :)

  • swiss624

    Is there a way to have images included with the answer that pop up nicely and close nicely?

  • hafe

    Thanks for a nice script! I have found a bug and don’t know how to solve it. Everything works find if you visit a section/catecory inside the page, using the category menu. But if you visit a category from an external link eg http://codyhouse.co/demo/faq-template/index.html#payments is there some problems with the padding/margin above the header “payments”. How can I add extra padding/margin above the header if the user visit the category from an external page without it will effect how i looks when the user visit a section/category inside the page?

  • Victor Agency

    Quick question. How can we make a bigger sidebar ( navigation text is very long and I would like to keep it on one line) and move the entire sidebar box over more to the left of the screen. Tried a few things so far but nothing is working correctly. Anyone have an idea? Big thanks!

    • Roxana Alina

      just change the values in the css

      .cd-faq-categories {

      positon: absolute;
      top:0;
      left: -150px;//nove the container to the left
      width: 350px; //give it the width that you need
      z-i9ndex: 2;
      }

  • Thomas Mann

    Hi, Great work!
    Just wondering why the css in this seems to mess up the ‘mega-site-navigation’ styling. Is there anything in particular I can do/remove so I can have both on the same page?

    • http://codyhouse.co Claudia Romano

      Hi Thomas, not sure why. What happens to the navigation? Did you check if the same class has been used in both resources? Thanks

  • Eli McArthur

    How would I go about adding an expand/collapse all button to this site?

  • utsav misty

    Hi!
    Great work. I have a question, for viewport larger than 767px intralinks are working fine and the links takes us to the section directly (for eg: xyz.com/faq#mobile) but for viewport smaller than 768px the intralinks doesn’t take us to that particular section (slide in). It would be great if you could help me out in doing so.

    Thanks you so much for this amazing work.

  • samy samir

    please help ,, i have a problem in mobile when i click any tab like basic or other show nothing
    except the last one show me all question and answers
    what is the problem

  • Azzis

    Hi, Can someone help me? I am technologically inept and want to add this page to a godaddy website I am working on. I have downloaded the file and try to copy/paste in the html code option on the website. Nothing pops up.

    • psych

      There is no simple solution to your problem. Ask a friend to help you with this. Having said that if you copy paste the code in an empty html file you will see something but you need to follow all the instructions to see something useful.

  • Anita Hill

    Great piece of work! Very well done.

    One thing I would like to do is to get the categories box (.cd-faq-categories) to be fixed between 768px and 1024px, as well as the standard 1024px+. That’s a beautiful addition to the code, and the way I have the css set up for my instance, it would be great to see it at 768px+.

    Does anybody know how to bring that about?

  • MBvB

    Hi Codyhouse,

    Awesome work on the FAQ here.

    Tho I have a question…

    I am working on getting with to work properly on a test-site.

    My problem is, I have a header with a fixed function of 100px. So when you “click” on the menu you can’t see the first 100px of content of the “cd-faq-items”, hence it starts on top:0px; and not at top: 120px like I got the Menu/Categories to.

    Any help or advise?

    Header height: 175px;
    Header-Fixed height: 100px;

    Thanks in advance.

    • Marjonh Davin

      @MBvB , hey , you solved this problem now ? we have the same goal. and i’m struggling this for 2 hrs :/
      i set the top of the cd-faq-categories on scroll to 100px. the problem is the cd-faq-items not aligned when scroll :/ could please lend your code ? :) thanks

  • DJ Roland

    I just stumbled upon this by chance, this is really good work! Thank you for sharing, much appreciated.

  • Mo

    Hi.
    I’m having an issue where the contents of the questions are shown on the load of the page, can you tell me how to go about fixing this? i know that content-visible should be manipulated somehow but i’m not sure.

  • GunnyGary

    I’m using your design for two FAQ pages for two of our applications. Works fine with Firefox and IE 11, however, most of our workstations are still using IE 8. When I test with IE8 I get a blank screen. Any suggestions?