I just customized my use of the FAQ Manager extension and added a 'toggle' functionality to the FAQ answers. Nothing difficult, but I thought I'd share this here.
1) Download FAQ Manager extension via Package Manager
2) Set up the FAQ items (Components --> FAQ Manager)
3) Create 'faqTpl' Chunk:
<div id="yourContainerDiv">
<h3 class="faq_question">[[+question]]</h3>
<div class="faq_answer">[[+answer]]</div>
</div>
4) Add the jQuery library to your page header, and also this code:
<script>
$(document).ready(function() {
$('h3.faq_question').each(function() {
var tis = $(this),
state = false,
answerNext = tis.next('div.faq_answer').hide().css('height','auto').slideUp();
answerAll = $('#yourContainerDiv').children('div.faq_answer').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answerAll.slideUp(state);
$('#yourContainerDiv').children('h3').removeClass('active');
answerNext.slideToggle(state);
tis.addClass('active',state);
});
});
});
</script>
5) Customize your CSS:
#yourContainerDiv h3 { cursor:pointer; }
#yourContainerDiv h3.active { color:#34B0CB; }
div.faq_answer { height:0; overflow:hidden; position:relative; }
dif.faq_answer p { padding:0; margin-bottom:15px; }
6) Call the FAQ items in your template:
[[faqman? &tpl=`faqTpl` &outputSeparator=`<hr>`]]
I also styled my <hr> with a dotted line background image:
hr {
text-shadow: none;
border: none;
height: 1px;
background: url(../images/hr.png) repeat-x;
}
Thanks to
http://davidwalsh.name/jquery-sliders for the jQuery toggle script!
I hope this helps someone!
