\"use strict\"; var $ = function(id) { return document.getElementById(id); }; //
ID: 3884694 • Letter: #
Question
"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 <a> tag
h2Elements[0].firstChild.focus();
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2><a href="#">What is jQuery?</a></h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>
Extra 6-3 Modify the FAQs
application
This exercise has you make a minor modification to the FAQs application. When
you’re 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.
1.
Open the HTML and JavaScript files in this
folder:
exercises_extrach06 aqs
Then, run the applicat
ion to refresh your memory about how it works.
2.
Add code
to the
toggle() function 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 aren’t 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 weren’t
clicked.
Explanation / Answer
Hi,
1.faqs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2><a href="#">What is jQuery?</a></h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>
2. main.css
* {
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;
}
3. faqs.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
// the event handler for the click event of each h2 element
window.onload = function() {
// get the h2 tags
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
function toggle(){
var h2;
for(var i=0; i < h2Elements.length; i++){
h2 = h2Elements[i];
if(h2 == this){ // The item we clicked
if(!h2.hasAttribute("class")){ // If it's open
hide(h2);
} else { // If not
show(h2);
}
} else{ // Not the item we clicked so it should be closed
hide(h2);
}
}
}
// toggle plus and minus image in h2 elements by adding or removing a class
function show(h2){
var div = h2.nextElementSibling;
h2.removeAttribute("class")
div.setAttribute("class", "open");
}
// toggle div visibility by adding or removing a class
function hide(h2){
var div = h2.nextElementSibling;
h2.setAttribute("class", "minus")
div.removeAttribute("class");
}
// attach event handler for each h2 tag and init classes
for (var i = 0; i < h2Elements.length; i++ ) {
h2Elements[i].onclick = toggle;
hide(h2Elements[i]);
}
// set focus on first h2 tag's <a> tag
h2Elements[0].firstChild.focus();
}
Let me know if any change required.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.