JQuery Beer FAQ Tutorial
Change Question Style When Clicked
Section 2, Lesson 4
JQuery Beer FAQ Tutorial
Change Question Style When Clicked
Section 2, Lesson 4
This step adds a click handler via JQuery for all the elements having the faq-question class. The goal is to change the style of the question when clicked.
Insert the highlighted lines 13 to 18 in the index.html file in your practice folder, then save.
Source Code
On line 13 JQuery handles any click event sent to an element with the faq-question. It passes an anonymous function where we have Javascript when the click event occurs. The anonymous function code removes the faq-question-selected class from all elements having the faq-question class and applies the faq-question-selected class to the element clicked. These are lines 14 and 15. You use the addClass and removeClass methods to accomplish these class changes.
faq-selected class is removed from all elements having the faq-question class and applies the faq-selected class to the element clicked.Examine the site.css file lines 68 to 70 and 74 to 76 for the styling changes.
Source Code
This is the completed site.css file for this tutorial. There are no changes from the previous lesson.
The classes faq-question-selected and faq-selected are being used in the Javascript you added.