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.
Next we are going to create four CSS rules for the question-and-answer blocks. Let's come up towards CSS panel. Let's create our first rule. First one is going to be called .faq. This is going to be a Class. Let's click OK. Let's come over to the Box properties. Let's uncheck Same for all for Padding. Let's set a Padding Top of 35, Right of 15, Bottom of 15, Left of 70. For Margin, uncheck Same for all.
We are going to set the Top to 0, 15 on the Right, 35 on the Bottom, 15 on the Left. Let's come over to Background. For the Background-color, let's choose white. For the Background-image, let's choose Browse, and let's grab note_top.jpg. Click OK. For repeat, we are going to set this no repeat, 0 on the X, 0 on the Y for positioning. And then lastly let's come down to Positioning, and let's set Positioning to relative.
We are setting this to relative, so that later on when we add the Q and the A divs that are going to be absolute positioned, they'll absolute position themselves relative to this object. Next let's click OK. Let's create another rule. This one is going to be called .faq_question. Let's click OK. Let's go to the Box properties. For Margin, let's put 0 in for all.
For Padding, let's uncheck Same for all. We are going to set 0 on the Top, 0 on the Right, 5 on the Bottom, and 0 on the Left. Next we are going to come down to Extensions, and for Cursor we are going to come down and choose help. This is going to give us that question mark icon when somebody rolls over these questions. Next let's go to Block properties. We are going to set the Display to inline-block, which is going to give properties that will be much like an image tag.
And then lastly let's come back to Type settings. For Font-weight, we are going to choose bold, and for the Color, we are going to put in a custom color #1f4f71 and click OK. Let's create another rule. This one we're going to call .faq_ answer_container. Let's click OK.
Let's come over to Box properties. We are going to set the height of this to 0; we are going to set Padding to 0 for all. Let's come down to Positioning. For Overflow we are going to set hidden, and then back to Type. We are going to set a custom color inside of here, #bf572c, then click OK. Now let's create one more rule. This one is going to be called .faq_answer. Let's click OK.
Let's come up to the Box properties. For Margin, we are going to set 0 for all of these. Padding we are going to set 0 for all as well. Let's come back to Type. Font-weight we are going to choose normal, and for Color, we are going to type #bf572c, then click OK. Now that we have our CSS rules in place for the question-and-answer blocks, in the next movie we will actually put them put them into the faq container in the proper order.
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.