simple JavaScript code to show and hide data

Question

I have problem with my code. On click "show button", I want to hide the button and show "data". But the data is not appearing. What is the problem?

 function my() {
        var yy = document.getElementById("show");
        yy.style.display="none";
     
       var b = document.getElementById("data");
        b.style.display="block";
      
      
      
    }

    #hide{ display:none;}
     


    #show{ display:true;} 
     
     

    #data{ display: none;}

     


    <div id="data"> this i s some data </div>
    <input onclick="my()" type="button" id="show" value="show data">
    <input type="button" id="hide" value="hide data">

`b.style.display="true";` makes no sense. There’s not `display: true;`. — Sebastian Simon, Jan 23 '17 at 06:21
`display:true` is not valid property,use `block` instead of `true`. — Abhishek Pandey, Jan 23 '17 at 06:32
Possible duplicate of [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — Hemant, Jan 23 '17 at 07:09

score 2 · Accepted Answer · answered Jan 23 '17 at 06:42

To toggle the div this is the code using Javascript.

document.getElementById("hide").onclick=function(){
  document.getElementById("data").style.display="none";
  }
document.getElementById("show").onclick=function(){
  document.getElementById("data").style.display="block";
  }

<div id="data"> this is some data </div>
<input type="button" id="show" value="show data">
<input type="button" id="hide" value="hide data">

simple JavaScript code to show and hide data

1 Answers1