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

Question

how can I hide the text opened while clicking on a button by clicking on the same button ? In other words, the same button should show or hide a text when you click on it.

Here's my code that shows a text :

<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

Define a variable to save the button state

 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

Try this out, it worked for me:

 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

Quite simple, using jQuery—

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