Blog

After my last article on a jquery image caption I have continued to fiddle with jquery and something I felt would be good to have is a FAQ slider, a bit like an accordion.  I am sure you have seen one around but if not its basically a list of Questions and once clicked apon the answer is show below.

Click here to view the demo

The HTML

For the HTML we need questions which im going to wrap in h2 tags the below that we need to put the answer in side a div with a class called FAQanswer. This will appear once the Question is clicked.

1
2

    <h2 class="FAQ">Question</h2>
    <div class="FAQanswer">Answer will go here.</div>

The Jquery

1
2
3
4
5
6
7
8
9

	$(document).ready(function(){
		$('.FAQanswer').hide();	
		$('h2').toggle(function(){
			$(this).next('.FAQanswer').slideDown();
			}, 
			function(){
			$(this).next('.FAQanswer').slideUp();
		});
	});

The first thing we need to do is hide all the answers, as the effect will be down when first clicked then up on the second click we can use the toggle function, when the h2 is clicked we want something to toggle which is the FAQanswer div. We need a function to make this work, we need to use .next otherwise when a h2 is clicked it will open all the answers. The $(this).next finds the next FAQanswer class after the H2 you clicked meaning only that one will open, then we just tell it we want it to slide down and then next time its clicked to slide up.

This will give you a very basic FAQ page, I have not added any styling to it, just so you follow the actual building of it. Click here to view the styled version.

How are the arrows changing?

As you used my example of the Sliding FAQ you will have noticed that the arrows change when you have activated a question then change back, this is very easy using the addClass function. I have included a background image in the H2 class which is pointing down by default, then I have a class called active which has the arrow pointing up. Below shows you how to use it.

1
2
3
4
5
6
7

	   function(){
		$(this).next('.FAQanswer').slideDown();
		$(this).addClass('active');
	   }, 
	   function(){
		$(this).next('.FAQanswer').slideUp();
		$(this).removeClass('active');

Making the Jquery Smarter

After I wrote the jquery for this I looked at it and thought I can make it much simpler. I was shocked at how much I have picked up in a short time. I’m starting to like this jquery stuff!

1
2
3
4
5
6
7

	$(document).ready(function(){
		$('.FAQanswer').hide();	
		$('h2').click(function(){
			$(this).next('.FAQanswer').slideToggle();
			$(this).toggleClass('active');
		});
	});

This is my improved code. As you can see its much shorter then before, the end result is the same and you might prefer the previous method or this one its personal preference. Now we are going to make use of toggle feature in jquery, one being slideToggle and the other toggleClass. This will then slide the FAQanswer div up and down and also add the active class and take it away. easy peesy…

Problems

I noticed a visual problem when I was adding in the CSS and that was when the answer slides down it seemed to slide then jump to the end. I don’t know why the browsers display it like this. To solve this I played with the height of the FAQanswer class if you set a height it takes out the jump and slides perfectly but I dont want a set height becasue no answer is the same length, so it might cut content off in the future. So I kept playing around, untill I added a set width which fixed it perfectly, dont ask me why. It now slides smooth so its all good.