Modify the FAQs application

This exercise has you make a minor modification to the FAQs application in chapter 6. When youre done, this application should work the same as before, except that only one answer can be displayed at a time. In other words, when the user clicks on a heading to display the answer, the other answers must be hidden.

This takes just a few lines of code, but you have to think it through.

Then, run the application to refresh your memory about how it works.

Enhance the code in the JavaScript file so only one answer can be displayed at a time.

HTML FILE

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 FILE

* { 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; }

JAVASCRIPT FILE

"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[i].onclick = toggle;

}

// set focus on first h2 tag's tag

h2Elements[0].firstChild.focus();

};

JavaScript FAQs What is JavaScript? 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