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

Posted on March 19, 2009, under JavaScript, jQuery 

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 ;)

Comment via Facebook

comments

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

  1. good one … keep rocking

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

  3. Very useful, thanks!

  4. 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. 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. @Gabe, Ah, that’s another good idea!

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

  6. 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. 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 :)

  7. Nice faq effect, thanks for sharing.

  8. 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. 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(){

      1. Well. This script works great but only if the id is from 0 to 9.

        This:
        var $q_id = $q.substr( -1 ); //Ex: 1

        must be replaced with this:
        var $q_id = $q.substr($q.indexOf('_') + 1); //Ex: 1

        Now we can use any id number.

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

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

  11. 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;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.