In this post we will learn how to make simple and clean frequently asked questions section using jQuery.

Please add this jQuery anywhere before closing tag on your web page.

jQuery:

(function($) {
  var allFaqs = $('.piefaqs > dd').hide();
  $('.piefaqs > dt > a').click(function() {
    $(this).parent().next().toggle();
    return false;
  });

})(jQuery);

HTML:

Nice Question 1
Sed nec tellus sit amet leo sodales ultrices. Vestibulum aliquet ex eget leo aliquet volutpat. Aenean placerat eros sit amet accumsan dapibus. Curabitur varius ante in leo ultricies condimentum. Maecenas ullamcorper vehicula ornare. Etiam euismod, est vel fermentum accumsan, odio elit pellentesque ex, et tincidunt sapien quam non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Nice Question 2
Nunc aliquet quis metus ut tempus. Mauris id sollicitudin ex. Morbi aliquam, erat eget ultricies posuere, erat arcu commodo ante, at vestibulum justo odio id nunc. Duis fringilla risus ex, nec scelerisque dui scelerisque at. Aenean at libero nulla. Proin rutrum in diam a dapibus. Nullam dapibus, dui non consectetur rhoncus, lacus mi dictum magna, eget egestas dui urna ut eros. Vestibulum eget auctor nisl, et viverra elit.

Nice Question 3
Morbi accumsan risus est, non lacinia erat consequat a. Nullam finibus ante dolor, quis ornare urna imperdiet vitae. Aenean facilisis ultrices est, quis cursus arcu tempus in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus volutpat iaculis volutpat.

CSS:

.piefaqs{
margin:20px 0;
}
dd{
margin-bottom:10px;
}

WOW you made it 🙂 Enjoy and please do not forget to share if you like it.