在faq页面上切换

Question

我在div中使用onclick切换函数。我将为其中之一展示一个示例：

<div id="question1">
<a href="#" style="color: #FFF"
onclick="toggle('answer1');">Can I access my work from home?</a>
</div>

<div style="display:none" id="answer1">
You can't access you University drive from home, it is advised to back up your work onto a cloud such as Google Drive or Dropbox. You can however access your tasks and see what deadlines you have to meet using something called Blackboard.
</div>

所以当我点击第一个答案显示的第一个问题时，我只想知道当我点击第二个问题时如何隐藏？因此，最终不可能同时显示两个答案。

Answer 1

在每次触发toggle()时，为答案div提供一个类(例如answers)，以将它们标识为一个组，然后执行类似下面的操作，以隐藏所有答案。

function toggle(id){
   var answers = document.querySelectorAll('.answers');
   for(var i=0; i<answers.length; i++){
      answers[i].style.display = 'none';
   }

   // show the target
   document.getElementById(id).style.display = "block";
}