FAQ component in jQuery

Mon, 08/13/2012 - 15:08 -- Arisen

If you are able to include the scrollto plugin: http://demos.flesler.com/jquery/scrollTo/ then when you add the scrollto class to the same element as the qa-container then you'll see a lovely animation that lets users see just how far they are traversing on the page.

This jQuery function also takes into account whether or not you would like to have multiple FAQs on a single page. Just a reminder to change the container id's and the question ids to be different than one another.

jQuery(document).ready(function($) {
        $('.qa-container').each(function(index, domEl) {
        var scroll = $(domEl).hasClass('scrollto');
        var d = new Date();
        var n = d.getTime();
        var questionHeader = '

Questions

'; var questionContent = '
    '; $(domEl).children('.qa').each(function() { var qid = $(this).attr("id"); questionContent += '
  • ' + $(this).children('.question').html() + '
  • '; var questionHeading = $(this).next('h3'); if(questionHeading.length){ questionContent += '

    '+questionHeading.text()+'

    '; } // add the return to top link to the bottom of the answer container var answerList = $(this).children('.answer'); if(answerList.length) { var returnToTop = '
    Return to Top'; $(answerList).append(returnToTop); } }); questionContent += '
'; //console.log(questionContent); var answerHeader = '

Answers

'; $(domEl).prepend(questionHeader+questionContent+answerHeader); $('.qa-menu').click(function(e){ $('.qa').removeClass('highlight'); var id = $(this).attr('id').split('#')[1]; if(id) { if(scroll) { e.preventDefault(); $.scrollTo('#'+id, 800); } $('#'+id).addClass('highlight'); } }); if(scroll) { $('.return-to-top').click(function(e){ e.preventDefault(); var id = $(this).attr('href').split('-')[1]; //alert(id); $.scrollTo('#questionHeader-'+id, 800); }); } }); });

Basic CSS for the FAQ component

.qa-container h2 {
    background: rgb(76,76,76); /* Old browsers */
    background: #4c4c4c; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM5JSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzJiMmIyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzFjMWMxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
    background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-8 */
    text-shadow:1px 1px #407BB3;
    border-radius: 5px 5px 0px 0px;
    color: #FFFFFF;
    padding: 8px 5px;
}
 
.questionHeader a {
    font-weight: bold;
    list-style: none outside none;
}
 
.qa-container .question {
    font-weight: bold;
}
.highlight {
    background-color: #E2E9F3;
}
.return-to-top {
    display: block;
    padding: 10px 0px;
}
Terms: