当我点击按钮显示内容时如何隐藏按钮?

时间:2015-11-05 19:22:53

标签: javascript html css

我想在点击它时隐藏按钮。但是我希望在单击按钮时显示我的内容。

#sectiontohide{
display: none;}

function toggle_div_fun(id) {

   var divelement = document.getElementById(id);

   if(divelement.style.display == 'none')
      divelement.style.display = 'block';
   else
      divelement.style.display = 'none';
}

<button onclick="toggle_div_fun('sectiontohide');">Display Content</button>
<div id="sectiontohide">`

this is the content i'd like to show when i click the button and button should disappear

1 个答案:

答案 0 :(得分:0)

试试这个:

function toggle_div_fun(id, btn) {
   var divelement = document.getElementById(id);
   btn.style.display = "none";
   if(divelement.style.display == 'none')
      divelement.style.display = 'block';
   else
      divelement.style.display = 'none';
}

<button onclick="toggle_div_fun('sectiontohide', this);">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>

如果您不需要重用代码,可能这更简单:

<button onclick="document.getElementById('sectiontohide').style.display='block'; this.style.display='none'">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>