JS accordion issue- Need help

programming
1

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.

FAQs

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.
  • {
    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();

};

2

David - would it be possible for you to format the code so that it is easier to read and call-out the changes that you’ve made? That will make it easier for us to help!

To format code, after you’ve pasted it, highlight it and click on the </> button in the posting toolbar :slight_smile:

3

My apologies. The HTML and CSS I can’t change. It was provided. They are as follows:

image.png976×731 21.1 KB

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;
    }
    .
    faqs.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 This is the beginning of the chunk of code I added**

** var faqs = $(“faqs”);**
** var accordionItems = faqs.getElementsByTagName(“h2”);**
** for (var i = 0; i < accordionItems.length; i++ ) {**
** (accordionItems[i].onclick) {
accordionItems[i].nextElementSibling.removeAttribute(“class”);
}

} // This is the end of the chunk of code I added. remaining code was provided

		
// 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();

};