Show / Hide paragraph under heading: jquery
04 Jan
I was looking to make a really simple FAQ page that consisted of questions in h2 headers and answers under the h2s in simple paragraphs. I could not find this exact solution so after a bit of research I made my own.
jquery:
$(document).ready(function(){
$(".faq h2").nextUntil("h2").slideToggle();
$(".faq h2").click(function() {$(this).nextUntil("h2").slideToggle();});
});
HTML:
<div class="faq"> <h2>This is question 1</h2> <p>This is the answer</p> <p>This is the answer</p> <h2>This is question 2</h2> <p>This is the answer</p> <p>This is the answer</p> <p>This is the answer</p> <h2>This is question3</h2> <p>This is the answer</p> </div>
Leave a comment if you find it handy!
References:
http://stackoverflow.com/questions/481076/jquery-how-to-select-all-conte...
http://www.learningjquery.com/2007/02/more-showing-more-hiding

Add new comment