JQuery Beer FAQ Tutorial
Slide Down Answer on Click
Section 3, Lesson 3
JQuery Beer FAQ Tutorial
Slide Down Answer on Click
Section 3, Lesson 3
The goal here is to use the click anonymous function on the faq-question element to open the answer to the question.
In the meantime you will see that once a question is opened, it remains open. However only the answer to the last FAQ question clicked will show a constrasting background.
If you experiment a bit you find that you can open all the FAQ answers but only one will show a constrasting background.
The closing of the FAQ answers and reversing their background color we will do in upcoming lessons.
Insert the highlighted lines 16 and 17 in the index.html file in your practice folder, then save.
Source Code
Lines 16 and 17 are performing the same styling changes to the elements with the faq-answer class as lines 18 and 19 do for the faq-question class.
We selected the all the faq-answer class elements on line 16 to remove the faq-selected class. However finding the faq-answer class element on line 17 required finding the appropriate element based on its sibling relationship to the the faq-question that generated the click event. This happens on line 17 using the JQuery next method can find the next sibling matching the selector provided in the method’s argument.
Source Code
This is the completed site.css file for this tutorial. There are no changes from the previous lesson.