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 to add divs into a every one of the questions for the Q and the A letters, let's come back over to our faq.js. Inside of the document ready after we've defined our click function that gets attached to every one of the faq_question classes, let's add a return. Let's start with dollar sign, beginning and ending parentheses. Inside of the parentheses we're going to type two tick marks for string literal, .faq. Outside of the parentheses, we're going to type .each, beginning and ending parentheses, semicolon.
Inside of each we're going to type function, beginning and ending parentheses, beginning and ending brackets. Let's split that open. So we're going to search for every time there's an faq div. Every time we find one we're going to type dollar sign, parentheses, this, .append, beginning and ending parentheses, semicolon. Inside of append two tick marks for a string literal. So what append is going to do is add anything inside of the string literal into each one of the faq items.
So here we're going to type some HTML. Let's start a div tag, type class=m two full quotes, letter_q. Let's end that tag, and then let's end the div tag. Let's start another div tag, div class=, two full quotes, letter_a. Let's end that tag, and let's end the div tag.
So now when the document is ready in addition to assigning a click event to every faq_question class, we're going to add in two additional divs into each question: one with a class of letter q and another one with a class of letter a. Now to test this let's come up to File. Choose Save All. Let's go back to faq.html. Let's come down and choose Preview in Browser. Now we should see the Q and the A positioning inside each one of these questions. Now that we know that the injections are working properly, in the next movie we'll add animation states onto the click event just like we have for the opening and closing of the answers.
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.