Accordion display for FAQ sections

Hi All,

 

Just thought I'd share a simple customization I did recently.This is very easy to apply, but might be desirable as a visual improvement for some communities.

 

The customization is to display FAQ questions in accordion like format, when only one questions is visible at a time, and some simple effects for hiding / showing questions are applied.

 

 

What's required to implement:

 

1. Create a custom component with the following script: (Note added css to the component for this example - ideally should be placed into the skin, but will also work from custom component)

 

Note css applied to div.faq-content li - this helps the smoothness of the expanding section.

 

<style>
div.faq-content .faq-question {
text-decoration:none;
font-size:20px;
display:block;
}

.faq-answer{display:none;}

div.faq-content li {
position:relative;
overflow:hidden;
}
</style>

<@liaAddScript>
(function($){
$(document).ready(function(){
                
$('.faq-question').click(function(e){
e.preventDefault();
$(".faq-answer").hide('slow');
$(this).next().not(':animated').slideToggle();
});
});

})(LITHIUM.jQuery);

</@liaAddScript>

 

 

2. Add the above custom component to the FAQ Page quilt.

 

and voila! :) Hope somebody finds this useful!