Create a Fancy F.A.Q. Page with 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 Comments

  1. says

    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

    • says

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

  2. says

    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!

    • says

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

      • says

        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.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *