Video: Using JavaScript to close the answer container

Now to begin writing our JavaScript to open and close the answer based on clicking the question, let's switch over to faq.js. Inside up here we're going to start by using jQuery's document ready statement. So let's start by typing a dollar sign, beginning parenthesis. Now if you're using Dreamweaver CS5.5, there's built-in code completion for jQuery, so you'll notice I can see the word "document" in this, and I can use my arrow keys to select from the individual items. If you're not using Dreamweaver CS5.5, you can still type in all of the JavaScript statements, but you'll just have to type them in by hand, and I'll be doing that throughout the course as well.

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.

Using JavaScript to close the answer container

Now to begin writing our JavaScript to open and close the answer based onclicking the question, let's switch over to faq.js.Inside up here we're going to start by using jQuery's document ready statement.So let's start by typing a dollar sign, beginning parenthesis.Now if you're using Dreamweaver CS5.5, there's built-in code completion forjQuery, so you'll notice I can see the word "document" in this, and I can use myarrow keys to select from the individual items.If you're not using Dreamweaver CS5.5, you can still type in all of theJavaScript statements, but you'll just have to type them in by hand, and I'll bedoing that throughout the course as well.

So let's start by typing document, inside of the parentheses, end the parentheses.Outside of the parentheses, type .ready, beginning and ending parentheses,semicolon, inside of the parentheses for ready, type function, beginningand ending parentheses, beginning and ending brackets. Let's split thatopen on the brackets.So inside of this document ready is basically everything that's going toexecute once all of HTML and CSS code has been loaded into the browser'sDocument Object Model, or the DOM.So once we know everything is there, let's start by typing dollar sign,beginning and ending parentheses, inside two single tick marks for astring literal, .faq_question.

We're going to search for every question item in the page.Outside of the parentheses .click, beginning and ending parentheses,semicolon, inside of the parentheses for click, type function, parenthesesand brackets. Let's split that open on the brackets.So for every item that has the faq_ question class assigned to it that's clickedon, inside up here we're going to type if, beginning and ending parentheses,beginning and ending brackets, split that open.

Inside of the parentheses is the condition we're going to check for.I'll put a few spaces in here, type dollar sign, beginning and endingparentheses, type this inside of the parentheses. This refers to the actualitem that was clicked .parent, beginning and ending parentheses, after theparentheses type .is beginning and ending parentheses, inside of the is, twotick marks for a string literal, .open.So what we're doing here is we're checking to see if the item we clicked on; ifits parent container has a class called open assigned to it.

This way, we can check whether or not the answer is actually in an open state or not.So inside of the if, let's type dollar sign, parentheses this.That's out of the parentheses .closest, beginning and ending parentheses.Inside of closest, we're going to type two tick marks for a string literal,.faq, outside of the parentheses .find, beginning and ending parentheses.

Inside of find two tick marks for string literal, .faq_answer_container.Outside of the parentheses we're going type .animate, beginning and endingparentheses, semicolon.Inside of animate, inside of the parentheses for animate, beginning and endingbrackets, inside of the brackets two tick marks for a string literal.We're going to set the height that's out of the string literal, colon,two tick marks for another string literal, and type 0, outside of thebrackets but still inside of the parentheses for animate, comma 500milliseconds or half a second.

Next line, dollar sign, parentheses, this inside of the parentheses.closest, beginning and ending parentheses.Inside of the parentheses tick marks for a string literal, .faq, outsideof the parentheses .removeClass, beginning and ending parentheses,semicolon. Inside of removeClass, two tick marks for a string literal,type in the word "open."So what the script is doing is it's checking the parent of the item that wasclicked to see if the open class has been assigned.

This way we know whether or not the answer's in an open or closed state.And if it is in an open state we're going to go through and find thecorresponding answer container, and we're going to animate it back to 0, and thenwe're going to take the open class off of that object.Now we have half of our script in place, in the next movie we'll put an elsestatement in that will open the answer if it's not in an open state, and thiswill give us that toggling effect for opening and closing the answer div.

There are currently no FAQs about Create an Expandable FAQ Listing with jQuery and Dreamweaver.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.