Add code to the toggle function in your faqs.js file so only one answer can be displayed at a time. To do that, create an array of the h2 elements. Then, use a for loop to go through the h2 elements in the array and remove the class attribute for all h2 elements that arent the one that has been clicked. You also need to remove the class attributes for all of the div siblings of the h2 elements that werent clicked. Note: the image .png files of plus and minus are simply images of + and -.

/* HTML code */

JavaScript FAQs

What is JavaScript?

JavaScript is a programming language that's built into the major web browsers. It makes web pages more responsive and saves round trips to the server.

What is jQuery?

jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites.

Why is jQuery becoming so popular?

Three reasons:

• It's free.
• It lets you get more done in less time.
• All of its functions are cross-browser compatible.

/* CSS Code */

* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; border: 3px solid blue; padding: 15px 25px; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; cursor: pointer; background: url(images/plus.png) no-repeat left center; } h2.minus { background: url(images/minus.png) no-repeat left center; }

a { color: black; text-decoration: none; } a:focus, a:hover { color: blue; } div { display: none; } div.open { display: block; } ul { padding-left: 45px; } li { padding-bottom: .25em; } p { padding-bottom: .25em; padding-left: 25px; }

/* JS Code */

"use strict"; var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each h2 element var toggle = function() { var h2 = this; // clicked h2 tag var div = h2.nextElementSibling; // h2 tag's sibling div tag

// toggle plus and minus image in h2 elements by adding or removing a class if (h2.hasAttribute("class")) { h2.removeAttribute("class"); } else { h2.setAttribute("class", "minus"); }

// toggle div visibility by adding or removing a class if (div.hasAttribute("class")) { div.removeAttribute("class"); } else { div.setAttribute("class", "open"); } };

window.onload = function() { // get the h2 tags var faqs = $("faqs"); var h2Elements = faqs.getElementsByTagName("h2"); // attach event handler for each h2 tag for (var i = 0; i < h2Elements.length; i++ ) { h2Elements[i].onclick = toggle; } // set focus on first h2 tag's tag h2Elements[0].firstChild.focus(); };