Watching:

Creating the HTML for Q and A containers


show more Creating the HTML for Q and A containers provides you with in-depth training on Web. Taught by Chris Converse as part of the Create an Expandable FAQ Listing with jQuery and Dreamweaver show less
please wait ...

Creating the HTML for Q and A containers

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.

And then lastly, let's get rid of the default text for faq_container. Delete that down here, up here, and then lastly the small bit of text at the top. If we switch over to Source Code, you will see all of the individual containers, so we have an outermost container here called faq, and then we have a div for faq_question, a div for the answer_ container, and then another div inside of there for the actual answer. Now that we have all of our HTML and CSS structure in place, in the next movie we will start by writing some JavaScript that will open and close the answer when we click on the question.

Creating the HTML for Q and A containers
Video duration: 2m 28s 41m 48s Intermediate

Viewers:

Creating the HTML for Q and A containers provides you with in-depth training on Web. Taught by Chris Converse as part of the Create an Expandable FAQ Listing with jQuery and Dreamweaver

Subject:
Web
Software:
Dreamweaver jQuery
Author:
please wait ...