Menus

Showing posts with label javascript div. Show all posts
Showing posts with label javascript div. Show all posts

Sunday, 17 February 2019

Show/hide 'div' using JavaScript


Toggle between hiding and showing an element with JavaScript.


Add Html

<span class="label label-success" onclick="showDivtodo();">Show/Hide ToDo</span>
or using button
<button onclick="showDivtodo()">Show/Hide ToDo</button>     
<div  id="todo" style="display:none;">Show/Hide this text</div>
//Your code here..
</div>

Add JavaScript

function showDivtodo(){
      var x = document.getElementById("todo");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }        
    }


JavaScript Toggle (Hide/Show) an Element