Im trying to create a simple
FAQ drop down but for some reason it is not working. Would you mind taking a look?
Thanks guys!
CSS
#faqs h3 { cursor:pointer; }
#faqs h3.active { color:#d74646; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { padding:0; margin-bottom:15px; }
JavaScript:
$(document).ready(function() {
$('#faqs h3').each(function() {
var tis = $(this),
state = false,
answer = tis.next('div')
.hide()
.css('height','auto')
.slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
HTML
<div id="faqs">
<h3>This is question 1?</h3>
<div>
<p>This is the answer to question #1.</p>
</div>
<h3>This is question 2?</h3>
<div>
<p>This is the answer to question #2.</p>
</div>
</div>
