JQuery Beer FAQ Tutorial
Create index.html and site.css Files with Styling and Content
Section 2, Lesson 2
JQuery Beer FAQ Tutorial
Create index.html and site.css Files with Styling and Content
Section 2, Lesson 2
This lesson we create the starting HTML and CSS file and add the code already completed to give you a jump start. Only the FAQ questions are shown. The FAQ answers will remain hidden until you work on the next section.
1. Create a new empty index.html file in your practice folder. Then paste this code into the file and save.
Source Code
There is a container with the class faq-container. Then each FAQ has a container with the class faq
Then each FAQ has a header using the h3 element which has a classfaq-question. This is for the FAQ question. The FAQ answer is in a div element with the class faq-answer.
2. Create a new empty site.css file in your practice folder. Then paste this code into the file and save.
Source Code
Notice the class selectors faq-selected, faq-question, faq-question-selection and the faq-question-hover. These set color and background-color properties. We will JQuery to swap them in and out of our FAQs as the user hovers and selects them.
Notice the class selector faq-answer selector has the display property set to none which will hide it from view. This will remain until you reach section 2 of the tutorial.
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.