JQuery Beer FAQ Tutorial
Completed Example for Section 2
Section 2 Lesson 1
JQuery Beer FAQ Tutorial
Completed Example for Section 2
Section 2 Lesson 1
This section of the tutorial creates the rollover and select effect for the FAQ questions.
You use the JQuery click and hover event handlers.
You swap out CSS class selectors we created in the site.css. To do that we use the JQuery hasClass, addClass, removeClass and css event handlers.
You also use the CSS cursor property and the auto and pointer values.
You will handle unselecting FAQ questions in the next section where the opening and closing of the FAQ answers is also handled.
Source Code
This is the index.html file.
This is the site.css style sheet. The faq-selected, faq-question, faq-question-selection and the faq-question-hover classes are used in the code. These set color and background-color properties.
The -webkit-backface-visibility:hidden; was needed for issues in how JQuery animates in Chrome. The -backface-visibility property is part of CSS3 and is not fully supported in legacy web browsers and in particular in IE legacy versions. However it’s use here is compensating for Chrome using the property as a default.