Join Chris Converse for an in-depth discussion in this video Adding in sample content, part of Create an Expandable FAQ Listing with jQuery and Dreamweaver.
- View Offline
To add in the content, let's open our snippets file.…So in Dreamweaver let's choose File > Open. From the Desktop let's go to exercise…files. Let's open snippets.html.…Let's switch over to Code view. Inside of Code view let's do Edit > Select All,…then choose Edit > Copy.…Let's switch back to our faq.html. Let's switch over to Code view, and what we…want to do inside of Code view is we want to take the class faq, select that…entire div, delete it with all of the divs inside, and simply paste in all of the…markup that we copied from the snippets file.…
Now you'll notice in the code that every question starts with the class faq,…and that has a child inside called faq_ question, faq_answer_container, and then…the faq_answer itself.…So the way we built this toggle is every time we click on an individual…question, it goes up to the parent, searches for the corresponding answer…container, and then animates this piece open.…This makes it possible to have any number of items in our page and only have one…
- Creating project folders
- Adding in sample question and answer content
- Creating CSS rules for graphics
- Animating the graphic states