JQuery Beer FAQ Tutorial
Slide Down Answer on Click
Section 3, Lesson 2

JQuery Beer FAQ Tutorial
Slide Down Answer on Click
Section 3, Lesson 2

 

The goal here is to use the click anonymous function on the faq-question element to open the answer to the question.

The closing of the FAQ answers are covered in upcoming lessons. In the meantime you will see that once a question is opened, it remains open.

Live Screenshot Web Browser

Insert the highlighted line 18 in the index.html file in your practice folder, then save.

Source Code

JQuery provides the slideDown method that animates the change from invisible to visible. The slideDown has some optional arguments such as callbacks to an anonymous function and a duration. Without any arguments the slideDown method meets most timing needs.

Source Code

This is the completed site.css file for this tutorial. There are no changes from the previous lesson.