Create a Fancy F.A.Q. Page with jQuery

Posted on March 19, 2009, under JavaScript, jQuery,  Bookmark it

Do you have a F.A.Q. page and you wish to add some cool effects on it? This tutorial helps you to do that. I will show you how to add the effects using the power of JQuery.

Before going through the setup process, check the demo of the fancy F.A.Q. page.

To add the Scroll and the Color Fading effects I’ve used 2 JQuery plugins: Scroll.To & highlightFade. The former is used to add a scroll effect to the target element (ie: a question containing the answer) and the later is used to add a color fade effect to the text that should be read.

How to add the effects in my F.A.Q. page?

First, you need to include the necessary JS files: the JQuery Main File and the 2 plugins: Scroll.To and highlightFade:

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="javascript/jquery.highlightFade.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>

For the demo, I’ve used 7 questions. When the user clicks on one, the window will scroll to the answer and highlight it.

(content of init.js)

<script type="text/javascript">
<!--
$(document).ready(function() {
// Question 1
$('#question_1').click(function(){
$.scrollTo('#answer_1', {duration: 500, onAfter:function(){
$('#answer_1_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

// ................................
// 2, 3...7
// ................................

// Question 7
$('#question_7').click(function(){
$.scrollTo('#answer_7', {duration: 500, onAfter:function(){
$('#answer_7_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

// Go To TOP
$('.go_to_top').click(function(){
$.scrollTo('#top_zone', {duration: 500});
});

});
-->>
</script>

How it works?

After the DOM is ready and the link for the question is clicked the Scroll.To plugin is triggered and scrolls the window to the target element (ie: answer_1). After the scroll event is completed, the second plugin highlights the text that needs to be read (e: answer_1_text).

- – Question – -

<a id="question_1" onClick="return false;" href="#">How does it work?</a>

- – Target Element – -

<h3 id="answer_1">How does it work?</h3>

- – Text to Highlight – -

<div id="answer_1_text">It works using JQuery.</div>

- – JavaScript – -

// Question 1
$('#question_1').click(function(){
$.scrollTo('#answer_1', {duration: 500, onAfter:function(){
$('#answer_1_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

Before every answer there is an up arrow. If clicked it will scroll the window to the top.

How it’s done?

First, we need to set the ‘go_to_top’ class to the link:

<a class="go_to_top" href="#" onClick="return false;"><img src="http://www.your-site.com/images/arrow_up.png" border="0"></a>

When clicked, all the links that have this class will trigger the Scroll.To plugin:

// Go To TOP
$('.go_to_top').click(function(){
$.scrollTo('#top_zone', {duration: 500});
});

The ‘top_zone’ element should be added just after the tag:

<a id="top_zone"></a>

What’s the role of onclick=”return false;”? This is used to prevent the URL of the link from being open. If you remove it, when the links are clicked the window will scroll first to the top (instantly) and then the Scroll.To plugin will be triggered. This is not so nice especially for the ‘Go to Top’ links.

Check the source code of the demo page to understand the whole process.

Happy coding ;)

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

Get our RSS Feed!

Tags:

Related Posts

16 Replies to "Create a Fancy F.A.Q. Page with jQuery"

  1. saurabh shah
    May 13, 2009 at 1:37 PM
    Reply

    good one … keep rocking

  2. Technology Related Links for May 13th - Jason N. Gaylord's Blog
    May 13, 2009 at 11:08 PM

    [...] Create a Fancy F.A.Q. Page with JQuery (Suggested by Elijah Manor) [...]

  4. Derek
    May 31, 2009 at 8:02 PM
    Reply

    Very useful, thanks!

  5. Cory
    August 4, 2009 at 2:33 AM
    Reply

    This tutorial gave me some great inspiration. I rewrote my own version of this so you don’t have to create a function for EACH question. It reuses the code no matter what.

    It will also degrade gracefully if javascript isn’t enabled:
    http://www.corydorning.com/blog/jquery-faqs-scroll-and-highlight-tutorial

    1. Gabe
      August 4, 2009 at 3:49 AM
      Reply

      I’m glad to hear that. Nice write-up Cory! That function for each question is useful if you want to add different effects to the questions.

      1. Cory
        August 11, 2009 at 5:08 AM
        Reply

        @Gabe, Ah, that’s another good idea!

  6. 網站製作學習誌 » [Web] 連結分享
    September 1, 2009 at 3:42 AM

    [...] Create a Fancy F.A.Q. Page with JQuery [...]

  7. Colin
    January 27, 2010 at 1:56 PM
    Reply

    Cool effect. The highlighting is great for when you scroll to the bottom of the page and it isn’t isn’t immediately obvious where the question you clicked on is.

    I made an FAQ script thingy that uses search instead of anchor link questions. Check it out at http://breezyfaq.com

    1. Luckner Jr. Jean-Baptiste
      January 13, 2011 at 6:24 PM
      Reply

      I like what you did here. It looks pretty cool.

      Quick note:

      You should do a check when the page loads to see if your GET params are set. If not, there’s no need to show the no posts found message :)

      Also, check out &lta href=”http://jqueryui.com/demos/autocomplete/”&gtJQuery UI autocomplete&lt/a&gt. It might add some spice to your search feature :)

  8. iTechRoom
    September 29, 2010 at 3:45 AM
    Reply

    Nice faq effect, thanks for sharing.

  9. Luckner Jr. Jean-Baptiste
    January 13, 2011 at 6:16 PM
    Reply

    Gabriel,

    Nice article! The script was quite easy to install and use. I made a few modifications to make the script slightly more coder-friendly.

    Assuming that we are adding and removing FAQ questions from a portal or something, I did the following:

    1 – Added the class “faq_question” to each FAQ question link

    2 – Changed your question link click event to the following. That way new faq items added do not require a code update.


    $('.faq_question').click(function(){
    var $q = $( this ).attr( 'id' ); //Ex: question_1
    var $q_id = $q.substr( -1 ); //Ex: 1

    $.scrollTo('#answer_' + $q_id, {
    duration: 500, onAfter:function(){
    $('#answer_' + $q_id + '_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
    }
    });
    });

    Once again, thanks!

    1. Luckner Jr. Jean-Baptiste
      January 13, 2011 at 6:18 PM
      Reply

      Update:

      The last code was still in testing with static content so it worked fine.

      The one change needed to use this with dynamic DB content would be to change

      $(‘.faq_question’).click(function(){

      to

      $(‘.faq_question’).live(‘click’, function(){

  10. Rupert
    May 11, 2011 at 2:27 AM
    Reply

    Thanks very much, I am new to coding and this will be very helpful. Cheers

  11. Tim
    June 2, 2011 at 5:57 AM
    Reply

    Well explained, thanks. Ill will use it on our FAQ page.

  12. Garage Flooring
    August 4, 2011 at 2:23 AM
    Reply

    Awesome post about fancy faqs! It looks like a lot of repetition of code… Is there a model that doesn’t require a function call for each question?

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)