Progressive enhancement: Accordion Style FAQ’s with jQuery

Condense a lengthy FAQ page with accordion style navigation, making your answers only appear when the questions of interest are clicked.

To use it:

1. Add this script to the FAQ page
2. Assign class “question” to every question
3. Assign class “answer” to every answer

$(document).ready(function(){
		//just some regular style sheets. change them as you see fit
		var styling =".question{font-size:14px; font-weight:bold; cursor:pointer;}" +
					  ".answer{display:block;}" +
					  ".opened{color:#006699;}" +
					  ".closed{color:#009966;}";
		//attach style to the page
		var style = document.createElement("style");
        style.type = "text/css";
        try {
            style.appendChild( document.createTextNode(styling) );
        } catch (e) {
            if ( style.styleSheet ) {
                style.styleSheet.cssText = styling;
            }
        }
        document.body.appendChild( style );
		//style all questions as closed
		$(".question").addClass("closed");
		//make sure first question is styled as open
	        $(".question:first").removeClass("closed").addClass("opened");
		$(".answer").hide(); //hide answers
		$(".answer:first").show(); //show first answer
		//question click
		$(".question").click(function() {
			$(".answer").slideUp("fast");
			$(".question").removeClass("opened").addClass("closed");

			if ($(this).next(".answer").is(":hidden")) {
				$(this).next(".answer").slideDown("fast");
				$(this).removeClass("closed").addClass("opened");
			}
		});
});

Example HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit?


Ed ligula libero, dictum at dapibus non, egestas a massa. Cras sit amet dolor felis. Morbi gravida vulputate condimentum. Nam ut nisl nibh.


Nulla a placerat leo. Proin ut hendrerit tellus?


Sed consequat turpis ac justo tristique elementum. Maecenas vitae mi dui. Maecenas nulla ligula, condimentum vitae posuere nec, fringilla eu sapien.


Donec faucibus tristique quam ac eleifend?


Nullam malesuada malesuada tempus. Phasellus posuere imperdiet dignissim. Nam id arcu erat, vel volutpat est. Maecenas ullamcorper interdum lacus vel tincidunt. Quisque egestas turpis et orci rhoncus posuere. Integer vehicula gravida interdum.

Working Example

Related Posts:

• No Related Posts