Viewers: in countries Watching now:
Frequently asked questions (FAQs) are a popular aspect of any web site. This course shows how to create questions that have expandable and collapsible answers, allowing visitors to easily find the information they need. Author and jQuery expert Chris Converse shows how to build an FAQ section for your site quickly, using the tools in Dreamweaver and the code libraries in jQuery. In addition, the course demonstrates how to automatically link to a specific question, and automatically open the answer, giving you the ability to provide users with a direct answer to their question.
Now we're going to create our remaining CSS rules. Let's come over to the CSS Styles panel. Let's create a new rule. First one is going to be a tag, p tag. Let's click OK. Under the Box properties for a p tag, we want to just set the margins to 0 on all sides. Click OK. Let's create another rule. This one's also going to be a tag. Select the a tag. This is going to be for links. For links we want to come down to color inside of custom color inside of here.
We're going to type #bf572c, and then click OK. Let's create another rule. This would be a Compound rule, a. Let's come over here and choose :hover. We're going to add a pseudo class onto here. What we're going to do is come in here set the Color to black. So when I roll over the hyperlinks, they'll change black. Let's click OK.
Let's create another rule. This one is also going to be a Compound rule. This one is going to be .faq .letter_q. Let's click OK. First, let's go to the Box properties. We're going to set a width on this to 40 pixels; we're going to set a height of 50 pixels. Let's come over to Background properties. Let's choose Browse > Desktop > Images in the myFAQ folder.
Let's come over and choose q.png. Click Choose. For Background-position, let's choose 0 on the X and 0 on the Y. Then let's come over to the Positioning properties. Under Position, let's set absolute. For Top we're going to choose 20 pixels, and for Left we're going to choose 25 pixels. Then we're going to say OK. Create one more rule. This is also going to be a Compound rule, faq .letter_a. Let's choose OK.
Box properties, we're going to set a width of 43 pixels, a height of 40 pixels. Let's go to Background settings. For Background-image choose Browse. Let's select a.png. Click Choose. Background-position, 0 on the X and 0 on the Y. Positioning properties, let's come down and choose absolute. For the Top let's choose 42 pixels and for the Left let's type in 23 pixels. Then click OK. Now that we have all of our HTML and CSS in place, in the next movie we'll work on a script that will inject the divs for the Q and the A into each one of the questions, so we don't have to manually put them into our page.
There are currently no FAQs about Create an Expandable FAQ Listing with jQuery and Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.