Umbrella Development

A quick little jquery tutorial for anyone that’s interested. Of course I’m going to assume you have at least a little jquery knowledge. Such as setting up the basic foundation for the jquery library.

Now that that’s out of the way. Today I had to make some quick documentation for a piece of software and I wanted a simple single page FAQ system where the questions were at the top of the page and the answers would display inside a dedicated viewing window.

To accomplish this I decided to go with jQuery. And after writing it I figured I’d share it with you.  So lets get started.

First we are going to need a container for our Questions list. As well as a container (or div) for our Answers. AND…. A little travelling music please.

<div id="QContainer" style=" margin:15px auto; ">
    <div  style="float:left; width: 45%; ">
        <h3>Basic Topics</h3>
        <ul>
            <li >Question 1</li>
            <li >Question 2</li>
        </ul>
    </div>
</div>

Pretty simple right? A standard list where we put our questions. I’ve only put in a couple examples. You will notice our first div element has the id of QContainer this is so we have a id to refer to this element inside our jquery code later. Now lets build our shell for our answer area.

<div id="AContainer" style="width:90%; margin:15px auto; padding:15px; overflow: auto; visibility:hidden;">
    <ul  >
        <li>
            <h2>ANSWER 1</h2>
        </li>
        <li>
            <h2>ANSWER 2</h2>
        </li>
    </ul>
</div>

You’ll notice once again our first element in this code sample is called AContainer, again this will be referenced later in our jquery code. We’re almost there now, next we have to add some other ID’s to some elements in both the question and answer list so we can refer to them later just like our main Container div’s.  First in our Questions area, we need to give our UL an id so we can refrence it. For prosperities sake I’ve named this questions. Then we need to give each of our LI elements a title attribute that makes them unique, I decided to name them Q1 and Q2.

<div id="QContainer" style="width:50%; margin:15px auto; ">
    <div  style="float:left; width: 45%; ">
        <h3>Basic Topics</h3>
        <ul id="questions">
            <li title="Q1">Question 1</li>
            <li title="Q2">Question 2</li>
        </ul>
    </div>
</div>

Next we have to give our Answers area a couple more ID’s as well. I named our Answers UL element with an ID of answers and each LI needs to have an ID that corresponds to the title of the question it answers. For instance when your user clicks Question 1 which has a title value of Q1, we need an answer LI element with an ID of Q1 as well.  Look at the next example section of code if that doesn’t make any sense to you.

<div id="AContainer" style="width:90%; margin:15px auto; padding:15px; overflow: auto; visibility:hidden;">
    <ul  id="answers">
        <li id="Q1">
            <h2>ANSWER 1</h2>
        </li>
        <li id="Q2">
            <h2>ANSWER 2</h2>
        </li>
    </ul>
</div>

So now we’re ready to write some jQuery code and get this thing working. Lets start with the document ready statement. We want to make sure we start with all of our Answers hidden.

<SCRIPT type="text/javascript" >
        $(document).ready(function() {
            $('#answers li').hide('fast', function(){
                $('#AContainer).css('visibility', 'visible');
            });
         });
    </SCRIPT>

Next I wanted to make sure I could handle multiple q/a lists so I added some more code to the above ready function. We start this with creating an array of all of our question lists, so just keep adding the names of your lists to this array and all should be well.

            var qLists=["#questions"];
            for (x in qLists)
            {
                $( qLists[x] + " li" ).click(showAnswer);
                $( qLists[x] + " li" ).hover(handleHover);
                $( qLists[x] ).mouseout(handleMouseOut);
            }

Next we need to be able to show and hide the  answers when the user clicks on them… yea, finally some fun stuff! This function also goes inside the ready statement we started with, but after our array of question lists. This spod you could just copy and paste if you wanted. No changes needed. 

            function showAnswer(){
                var elem = '#' + $(this).attr('title');
                $(elem).parent().children().fadeOut('fast').delay(800);
                $(elem).fadeIn('slow');
                for (x in qLists)
                {
                    if(qLists[x] != '#'+$(this).parent().attr('id'))
                    {
                        $( qLists[x] ).children().removeClass('selected');
                    }
                }
                $(this).parent().children().removeClass('selected');
                $(this).addClass('selected');           
            }

Then I also wanted to be able to have the Question list highlight which question we were on hence we have a handleHover function . Again, just copy and paste.  Of course if we only do this and we have two lists then each list could have a highlighted question…so a FAQ with multiple lists could have an item in each list hightlighted. So to correct thia I added th handleMouseOut() function. Both of these functions require no editing and can be used as is.

            function handleHover()
            {
                $(this).parent().children().removeClass('highlight');
                $(this).addClass('highlight');
            } 

            function handleMouseOut()
            {
                $(this).children().removeClass('highlight');
            }

one last thing you will need for this to really work you will need the following css classes. Of course you can edit these to your liking. 

        #answers
        {
            list-style-type: none;
            padding:0;
            margin:0;
            width:100%;
        }
        #QContainer ul
        {
            list-style-type: none;
            padding:0;
            margin:0 0 0 20px;
        }
        #QContainer ul li
        {
            diplay:block;
            cursor: pointer; cursor: hand;
            padding:3px;
            font-weight:bold;
            margin:0;
        }
        .selected { color:#000; background:#EAEAAE; }
        .highlight { background:#EAEAAE; }

Finally if you followed along correctly your javascript should look like this:

<SCRIPT type="text/javascript" >
        $(document).ready(function() {
            $('#answers li').hide('fast', function(){
                $('#AContainer).css('visibility', 'visible');
            });

            var qLists=["#questions"];
            for (x in qLists)
            {
                $( qLists[x] + " li" ).click(showAnswer);
                $( qLists[x] + " li" ).hover(handleHover);
                $( qLists[x] ).mouseout(handleMouseOut);
            }

            function showAnswer(){
                var elem = '#' + $(this).attr('title');
                $(elem).parent().children().fadeOut('fast').delay(800);
                $(elem).fadeIn('slow');
                for (x in qLists)
                {
                    if(qLists[x] != '#'+$(this).parent().attr('id'))
                    {
                        $( qLists[x] ).children().removeClass('selected');
                    }
                }
                $(this).parent().children().removeClass('selected');
                $(this).addClass('selected');           
            }

            function handleHover()
            {
                $(this).parent().children().removeClass('highlight');
                $(this).addClass('highlight');
            }

            function handleMouseOut()
            {
                $(this).children().removeClass('highlight');
            }

         });
    </SCRIPT>

Of course you could expand on this and use it for things other than an FAQ display and if you do we’d love to see what you used it for and how you implemented it. Love to hear your feedback as well. Have a better way of accomplishing this please share. All we ask is that if you do use this code you make sure you are using it for good and not evil. Have a great day and check back for more tutorials and tips.