I am trying to make only one h2 element to be open at a time. If I already have an open one and I click on another one, the previous one should hide itself. I have tried creating an Array and use for loop to check each h2 element if it's open or not. My for loop checks only one h2 instead of all 3 how I can fix it and keep only one open at a time.
Here is my code snippet:
"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
var hello = document.getElementsByTagName("h2");
// 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");
}
for(var i = 0; i < hello.length; i++ ){
if(div.hasAttribute("class")===false){
alert("false");
}else{
alert(div[i]);
}
}
};
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();
};* {
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;
}<!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>