CODEWITHSUNDEEP
javascripthtmlcss
JB670
JB670

Reputation: 7

Hide text with the same button it opened it

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>

Upvotes: 0

Views: 849

Answers (3)

RemyShad
RemyShad

Reputation: 33

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>

Upvotes: 0

Hyyan Abo Fakher
Hyyan Abo Fakher

Reputation: 3527

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>

Upvotes: 3

Sujan Sundareswaran
Sujan Sundareswaran

Reputation: 2551

Quite simple, using jQuery—

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

Upvotes: -1

Related Questions