一次只显示/隐藏一个 div

Question

This code is the untouched version of a FAQ consisting of three answers that can be shown or hidden when click on it. My task is to modify to show only one answer at a time (the other two must close). I got a hint to 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. Thank you,

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

Answer 1

Something like the following might do the trick assuming your existing script/markup is currently working. I can't test my answer without the HTML/CSS.

Essentially it just iterates over the faq items when ones clicked and hides them if they aren't the element that was clicked or shows if it is the element clicked - it won't toggle if the same element is clicked twice - one will always remain open.

 "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 accordionClick(){ 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 closeItem(h2); } else{ // If not openItem(h2); } } else{ // Not the item we clicked so it should be closed closeItem(h2); } } } function openItem(h2){ var div = h2.nextElementSibling; h2.removeAttribute("class") div.setAttribute("class", "open"); } function closeItem(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 = accordionClick; closeItem(h2Elements[i]); } // 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; }

 <main id="faqs"> <h1>JavaScript FAQs</h1> <h2><a href="#" >What is JavaScript?</a></h2> <div> <p>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. </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 web sites. </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>

Answer 2

HTML for the script:

<!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 programming language that's built into the major web browsers.
                It 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 web sites.
            </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>

And CSS for the script:

* {
    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;
}