jQuery: build a FAQ toggler
Though I’m not expert at it, I love having a play with jQuery. I came up with this show-hide toggle script, useful for enhancing the presentation and usability of a ‘Frequently Asked Questions’ section on a website.
Unlike other scripts, this one allows the user to show individual answers or all answers on a FAQ.
Remember, the webpage will need to reference the jQuery library for this script to work.
HTML
Use a definition list (dl) to markup the FAQ.
<dl class="faqs">
<dt>Question 1</dt>
<dd>Answer 1</dd>
<dt>Question 2</dt>
<dd>Answer 2</dd>
<dt>Question 3</dt>
<dd>Answer 3</dd>
</dl>
<p><a id="show-hide-all">Show all</a></p>
jQuery
Clicking a question (dt) on the .faqs (dl) will show/hide the answer (dd) and will toggle the show-hide-all link between ‘Show all’ (if any items are hidden) and ‘Hide all’ (if all items are visible).
Clicking show-hide-all will show/hide all .faqs answers (dd) and will toggle the show-hide-all link text between ‘Show all’ (when all items are hidden) and ‘Hide all’ (when all items are visible).
(function($) {
$(function() {
$('.faqs dd').hide();
$('.faqs dt').click(function () {
$(this).next('.faqs dd').slideToggle(500);
if ( $('.faqs dd:hidden').length == 0 ) {
if ($('#show-hide-all').text()=='Hide all')
$('#show-hide-all').text('Show all');
else
$('#show-hide-all').text('Hide all');
}
else $('#show-hide-all').text('Show all');
});
$('#show-hide-all').click(function () {
if($('.faqs dd').is(':hidden')) {
$('.faqs dd:hidden').slideToggle(500);
if ($('#show-hide-all').text()=='Hide all')
$('#show-hide-all').text('Show all');
else
$('#show-hide-all').text('Hide all');
}
else if ($('.faqs dd').is(':visible')) {
$('.faqs dd:visible').slideToggle(500);
$('#show-hide-all').text('Show all');
}
});
});
})(jQuery);