How to display div caused by onclick event

Question

I have two div s. I want to show a div (which has a different div inside it) when the onclick event fires.

Any help or suggestion would be appreciated.

Answer 1

Here you go:

 div{ display: none; } document.querySelector("button").addEventListener("click", function(){ document.querySelector("div").style.display = "block"; }); <div>blah blah blah</div> <button>Show</button> 

LIVE DEMO: http://jsfiddle.net/DerekL/p78Qq/

Answer 2

You need to provide the div id you want to show / hide and then use this code:

HTML:

 <div id="one"> <div id="tow"> This is text </div> <button onclick="javascript:showDiv();">Click to show div</button> </div> 

JavaScript:

 function showDiv() { div = document.getElementById('tow'); div.style.display = "block"; } 

CSS

 ​#tow { display: none; }​ 

Fiddle: http://jsfiddle.net/xkdNa/

Answer 3

If you have a div id try the following:

  <input type='submit' onclick='$("#div_id").show()'> 

Answer 4

 function showstuff(boxid){ document.getElementById(boxid).style.visibility="visible"; } 

 <button onclick="showstuff('id_to_show');" /> 

It will help you, I think.