制作一个按钮以显示隐藏的内容[关闭]答案

【问题标题】：Make a button to show contents which are hidden [closed]制作一个按钮以显示隐藏的内容[关闭]
【发布时间】：2015-08-07 12:42:12
【问题描述】：

我想在 html 中创建一个按钮（例如 this 页面的“下一步”按钮）。我希望在单击时显示隐藏的内容。有人请指导我如何做到这一点。

【问题讨论】：

有一些你试过的代码吗？
欢迎来到 Stack Overflow！不幸的是，指向您网站的链接对任何人都没有帮助；如果您的问题得到解决，您在此处的链接将不再代表您所描述的问题，您的问题将是多余的。出于这个原因，我们要求您将相关代码放在问题本身中，以便对未来的用户有所帮助。

标签： html button

【解决方案1】：

把所有的 div 容器放到高度：0；默认情况下隐藏溢出，单击按钮使容器高度：自动并添加类“活动”并检查条件，如果容器没有活动类，则将类“活动”添加到容器

div#container {
  height:0;
  overflow:hidden;
}
div#container.active
 {
   height:auto;
   overflow:auto;
}

【讨论】：

【解决方案2】：

HTML：

<input type="button" onclick="javascript:toggle()" value="Toggle visibility">
<div id="showhide" style="display: block">
    This text can be shown or hidden
</div>

Javascript：

  window.toggle = function() { 
    // get the Div 
    var myDiv = document.getElementById('showhide');

    // now toggle the visibility, depending on current state
    if (myDiv.style.display == 'block') { 
      // Div is visible. hide it
      myDiv.style.display = 'none';
    } else { 
      // Div is hidden. show it 
      myDiv.style.display = 'block';
    }
  }

这是一个例子：

http://jsfiddle.net/2njLvf5p/

【讨论】：