Join Chris Converse for an in-depth discussion in this video Creating the HTML for Q and A containers, part of Creating an Expandable FAQ Listing with jQuery and Dreamweaver.
Now we need to add divs into our HTML page and make use of this CSS class that we just created. So let's get our cursor after the word "class" and that default text for the faq_container. Let's come up to the Insert panel. Under Layout, let's choose Insert Div Tag. And the first one we are going to select is faq, then click OK. Next let's get our cursor after the word "class" and the default text for faq. Let's insert another div. This one is going to be faq_question. Click OK, and let's get our cursor after the word "Goes." Still inside of the default text for faq, let's insert another div tag.
This one is going to be the answer_container. Click OK. And then lastly, let's get our cursor inside of the default text for faq_answer_container. Choose Insert a Div, and let's insert faq_answer. Then click OK. Now at this point, let's come in and select the text for faq_answer, the default text Dreamweaver put in, and let's type in This is the answer.
Next let's come up and select the default text for faq_question. And let's replace that by typing This is the question. And now that we know where the question and answer areas are going to be, let's come in and get rid of the default text that was added by the outermost containers. Let's come in here, and delete the default text for faq Goes Here, and then let's delete the default text for faq_answer_container Goes Here.
- Creating project folders
- Adding in sample question and answer content
- Creating CSS rules for graphics
- Animating the graphic states