Main menu

Show / Hide paragraph under heading: jquery

04 Jan
Published by Mark W. Breneman

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.