使用打开文本的相同按钮隐藏文本

Question

如何通过单击同一按钮来隐藏单击按钮时打开的文本？换句话说，当您单击时，相同的按钮应显示或隐藏文本。

这是我的代码，显示了一个文字：

<h3> 
    <button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
                    <p id="infos"></p>

                    <script>
                        function myFunction() {
                            document.getElementById("infos").innerHTML = "blablabla";
                    }
                    </script>
</h3>

Answer 1

定义变量以保存按钮状态

var clicked = 0;
function myFunction() {
  if(clicked == 0 ) {
    document.getElementById("infos").innerHTML = "blablabla";
    clicked = 1;
  } else {
      document.getElementById("infos").innerHTML = "";
      clicked = 0;
  }
}

<h3> 
  <button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
  <p id="infos"></p>
</h3>

Answer 2

试试这个，它对我有用：

function showHide() {
  var demo = document.getElementById('demo');
  if (demo.innerHTML === "") {
    demo.innerHTML = "bla";
  } else {
    demo.innerHTML = "";
  }
}

<p id="demo"></p>
<button onclick="showHide()">Show Hide</button>

Answer 3

非常简单，使用jQuery -

$( "#button" ).click(function() {     
    $('#text-to-toggle').toggle(200);
});