JavaScript显示/隐藏

Question

我正在使用这个基本代码来隐藏一个文本块并显示另一个并且它运行良好但我需要做什么才能再次单击关闭文本？现在它保持打开状态,直到选择了其他内容,因此在第一次选择之后总会打开一个或另一个.我添加了一些有用的密切链接,但更愿意点击标题(或其他任何内容)再次关闭它.其他类似的问题似乎要么使用jQuery,要么在选择后隐藏链接.

function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName('hide');
    for (var i = 0; i < divs.length; i++) {
      divs[i].style.display = 'none';
    }
    divid.style.display = 'block';
  }
  return false;
}

<a onclick="showhide('toggle1');">
  <h4>-> Title 1</h4>
</a>
<div class="hide" id="toggle1" style="display:none">
  Some text here. <a onclick="showhide('verify');">close</a>
</div>

<a onclick="showhide('toggle2');">
  <h4>-> Title 2</h4>
</a>
<div class="hide" id="toggle2" style="display:none">
  Other text here. <a onclick="showhide('verify');">close</a>
</div>

Answer 1

下面的代码将检查与已单击的链接关联的元素是否已经可见,如果是,则将其与其他元素一起隐藏.无需任何密切联系.

另外,正如@KScandrett指出的那样,检查浏览器是否支持document.getElementById所有浏览器都支持它是多余的,所以我没有把它转移到这个答案.

function showhide(id) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName('hide');
    var showElement = true;
    if (divid.style.display === 'block') {
        showElement = false;
    }
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }
    if (showElement) {
        divid.style.display = 'block';
    }
    return false;
}

<a onclick="showhide('toggle1');">
  <h4>-> Title 1</h4>
</a>
<div class="hide" id="toggle1" style="display:none">
  Some text here.
</div>

<a onclick="showhide('toggle2');">
  <h4>-> Title 2</h4>
</a>
<div class="hide" id="toggle2" style="display:none">
  Other text here.
</div>