How to display div after click the button in Javascript?

Question

I have following DIV . I want to display the DIV after button click .Now it is display none

<div  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" >

http://stackoverflow.com/questions/4357291/javascript-show-element-on-click — pyvi, Aug 05 '11 at 13:59
Unfortunately, every single answer here suggests `onclick` attributes. Please see [Show/hide 'div' using JavaScript](/q/21070101/4642212) instead. Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jun 19 '21 at 06:43

score 91 · Accepted Answer · answered Aug 05 '11 at 13:59

91

HTML Code:

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript:

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

See the Demo: http://jsfiddle.net/rathoreahsan/vzmnJ/

answered Aug 05 '11 at 13:59

Ahsan Rathod

5,465
2
21
25

Ahsan Rathod , Thanks . How to display array Div usibng javascript .can u help me ?

– Karthick Terror Aug 05 '11 at 14:48
It only shows the button but doesn't show the text when I click in – Ooker Sep 03 '15 at 14:19

James Hill · Answer 2 · 2014-01-22T13:01:45.650

16

HTML

<div id="myDiv" style="display:none;" class="answer_list" >WELCOME</div>
<input type="button" name="answer" onclick="ShowDiv()" />

JavaScript

function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
}

Or if you wanted to use jQuery with a nice little animation:

<input id="myButton" type="button" name="answer" />

$('#myButton').click(function() {
  $('#myDiv').toggle('slow', function() {
    // Animation complete.
  });
});

edited Jan 22 '14 at 13:01

answered Aug 05 '11 at 13:59

James Hill

60,353
20
145
161

2

Your JQuery code is much more elegant that doing the same with document.getElementById - of course useful only when using JQuery :D – Marcin Cylke Jun 21 '12 at 14:03
@MarcinCylke, great observation :P – James Hill Jun 21 '12 at 15:56
if I do it with JS the block disappears after i reload the page but i want the box to stay until i explicitly close it. How I can do it? – StealthTrails Aug 28 '15 at 20:37
It only shows the button but doesn't show the text when I click in – Ooker Sep 03 '15 at 14:19

score 4 · Answer 3 · answered Aug 05 '11 at 14:06

<script type="text/javascript">
function showDiv(toggle){
document.getElementById(toggle).style.display = 'block';
}
</script>

<input type="button" name="answer" onclick="showDiv('toggle')">Show</input>

<div id="toggle" style="display:none">Hello</div>

score 0 · Answer 4 · answered Aug 05 '11 at 14:00

0

<div  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" onclick="document.getElementsByClassName('answer_list')[0].style.display = 'auto';">

answered Aug 05 '11 at 14:00

pimvdb

151,816
78
307
352

1

getElementsByClassName will return a whole set of items.. you need to declare which one you want to change like this getElementsByClassName('foo')[0].style.display... – Walialu Aug 05 '11 at 14:03
@James Hill: Do you want to declare a function for this case? var fooJames = function(id){var d = document.getElementById(id);if(d.style.display=='block')d.style.display='none';return; d.style.display='block'; } In germany we call this: Mit Kanonen auf Spatzen schießen! – Walialu Aug 05 '11 at 14:10
@Walialu, I understand what you're saying, but as a general rule, inline JS is poor practice. The OP probably has other JS running on the site. I placed my logic in a function so that it could be added to one of the .js files that he/she is already referencing. FYI - this is a good read: http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/. – James Hill Aug 05 '11 at 14:14
how to get the displayed content collapse on another click ? – akhil verma Jun 15 '15 at 07:51

How to display div after click the button in Javascript?

4 Answers4

Linked