JQuery Beer FAQ Tutorial
Hide Opened Unselected Answers
Section 3, Lesson 4

JQuery Beer FAQ Tutorial
Hide Opened Unselected Answers
Section 3, Lesson 4

 

This step simply selects all the elements with the $(".faq-answer") class and hides them.

Live Screenshot Web Browser

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

Source Code

Line 20 uses the JQuery slideDown method. It is applied to all elements having the faq-answer class. This effectively closes all those elements.

Then on line 21 we use slideUp method to open the element with faq-answer class that is following the code>faq-question class element for the click event on line 13.

Like the slideUp method, the slideDown method arguments are optional and include duration and a callback to an anonymous function when the elements selected are closed.

Source Code

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