For an assignment, I have to use provided starter code. I must add code to the toggle function so only one answer can be displayed at a time. To do that, I must create an array of the h2 elements (accordionItems). 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. I also need to remove the class attributes for all of the div siblings of the h2 elements that were not clicked.
I can get the script to only show one item at a time, but my plus/minus images dont toggle and if I open an accordion item, the only way I can close it is by opening an different one.
Below is my code. Can anyone help me out with this? thank you.
FAQsJavaScript 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.
- {
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:
“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
//add array for h2s
var faqs = $("faqs");
var accordionItems = faqs.getElementsByTagName("h2");
for (var i = 0; i < accordionItems.length; i++ ) {
if (accordionItems[i].onclick) {
accordionItems[i].nextElementSibling.removeAttribute("class");
}
}
// 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();
};