# JS accordion issue- Need help

**URL:** <https://forum.kirupa.com/t/js-accordion-issue-need-help/636303>\
**Category:** programming\
**Created:** [March 27, 2017, 2:35am UTC](https://forum.kirupa.com/t/js-accordion-issue-need-help/636303 "2017-03-27T02:35:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Baca](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/david_baca/32/7987_2.png) [@David\_Baca](https://forum.kirupa.com/u/David_Baca)\
**Post date:** [March 27, 2017, 2:35am UTC](https://forum.kirupa.com/t/js-accordion-issue-need-help/636303/1 "2017-03-27T02:35:21Z")

</div>

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

```

};

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 27, 2017, 4:04pm UTC](https://forum.kirupa.com/t/js-accordion-issue-need-help/636303/2 "2017-03-27T16:04:20Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![David\_Baca](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/david_baca/32/7987_2.png) [@David\_Baca](https://forum.kirupa.com/u/David_Baca)\
**Post date:** [March 27, 2017, 5:04pm UTC](https://forum.kirupa.com/t/js-accordion-issue-need-help/636303/3 "2017-03-27T17:04:28Z")

</div>

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

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/e3c1b4660a7c7d83cb52af164a477b4a6b2d1c13.png)

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

```

};