I have a quiz blog/website on blogger. To show the answers of questions I have following html code:

<button >Show Answer</button>
<div >
  <p>Correct Answer</p>
</div>

<button >Show Answer</button>
<div >
  <p>Correct Answer</p>
</div>

<button >Show Answer</button>
<div >
  <p>Correct Answer</p>
</div>

And JavaScript like this:

<script type='text/javascript'>
     
//<![CDATA[ 
     var acc = document.getElementsByClassName("acc");
     var i;
    for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var pnl = this.nextElementSibling;
    if (pnl.style.display === "block") {
      pnl.style.display = "none";
    } else {
      pnl.style.display = "block";
    }
  });
}
    //]]>
 
</script>

And CSS like this:

.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ccc; 
} 
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

If some one clicks on all of the buttons, the buttons are acting as toggles rather than, showing one answer, then when the next button is clicked, hiding the previous answer and showing the new one in its place. What needs to be changed to enable this?

Thanks

CodePudding user response：

Try this one by using a forEach.

var acc = document.getElementsByClassName("acc");
let pn1 = document.getElementsByClassName("pnl");
   for (let i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
  this.classList.toggle("active");
  [...acc].forEach((item,index) =>{
  if(item == acc[i]){
  pn1[index].style.display = "block";
  }else{
   pn1[index].style.display = "none";
}
})
})
}

.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ccc; 
} 
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<button >Show Answer</button>
<div >
  <p>Correct Answer</p>
</div>

<button >Show Answer</button>
<div >
  <p>Correct Answer</p>
</div>

<button >Show Answer</button>
<div >
  <p>Correct Answer</p>
</div>

CodePudding user response：

1. Remove the buttons.

2. Add the following over each .pnl

   <!-- #ids must be unique so btn* = btn1, btn2, etc -->
   <!-- [for] of label must match #id of input -->
   <input id='btn*'  name='acc' type='radio' hidden>
   <label for='btn*'>Show Answer</label>

• Explination: A label and a form control (ex. <input>, <select>, etc) can be associated with each other if the form control has an #id and the label has a [for] that match. If one gets clicked, checked, etc then the other one does as well.

3. Add the following CSS:

     .acc:checked label .pnl {
        display: block
      }

• Explination: If an input is checked then the .pnl that is front of the label that is in front of the input. Note, when a group of radio buttons share a [name] only one may be checked at a time. Also, the radio buttons are hidden so it looks as if the label is the only tag interacting with the user.

.acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.acc:hover {
  background-color: #ccc;
}

.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.acc:checked label .pnl {
  display: block
}

label {
  display: block
}

<input id='btn1'  name='acc' type='radio' hidden>
<label for='btn1'>Show Answer</label>
<div >
  <p>Correct Answer</p>
</div>

<input id='btn2'  name='acc' type='radio' hidden>
<label for='btn2'>Show Answer</label>
<div >
  <p>Correct Answer</p>
</div>

<input id='btn3'  name='acc' type='radio' hidden>
<label for='btn3'>Show Answer</label>
<div >
  <p>Correct Answer</p>
</div>