How to make the fancy FAQs using MooTools.
The HTML
<div id="faqs"> <h3>This is question 1</h3> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....</p> </div> <h3>This is question 2</h3> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....</p> </div> </div>
Our MooTools javascript will be reliant upon a simple HTML structure of H3s followed by DIVs.
The CSS
#faqs h3 { cursor:pointer; }
#faqs h3.active { color:#d74646; }
#faqs div { }
You see I have very little CSS above — just the bare necessities. It’s up to you to make the content even more sexy. Maybe add some tweening on the content DIV when they show and hide.
The MooTools Javascript
window.addEvent('domready',function() {
$$('#faqs h3').each(function(header,i) {
var state = false, answer = header.getNext('div');
answer.slide('out');
header.addEvent('click',function(e) {
state = !state;
answer.slide(state ? 'in' : 'out');
if(state) {
header.addClass('active');
}
else {
header.removeClass('active');
}
});
});
});
We start by grabbing all of the H3 tags within the designated parent element. We then:
- Cycle through each heading (the “question”)
- Grab the next DIV and consider it our “content” container (the “answer”)
- Slide the answer out of view
- Add a click event to the question which will toggle the display of the answer.
