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" >
4 Answers
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/
2 Comments
Karthick Terror
Ahsan Rathod , Thanks . How to display array Div usibng javascript .can u help me ? <div style="float:left; width:420px; padding:10px 0px;display:none;" class="answer_list" id="welcomeDiv" > <?php $query1= "select * from tblanswers where questionID ='$question' and productID='$product_id' "; $result1=mysql_query($query1); while($qwe=mysql_fetch_array($result1)) { ?> <input type="radio" name="answer[<?php echo $question; ?>]" value="<?php echo $qwe['answer_id']; ?>" /><?php echo $qwe['text']; ?> <br /> <?php } ?> </div>
Ooker
It only shows the button but doesn't show the text when I click in
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.
});
});
4 Comments
Marcin Cylke
Your JQuery code is much more elegant that doing the same with document.getElementById - of course useful only when using JQuery :D
James Hill
@MarcinCylke, great observation :P
StealthTrails
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?
Ooker
It only shows the button but doesn't show the text when I click in
<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>
Comments
<div style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" onclick="document.getElementsByClassName('answer_list')[0].style.display = 'auto';">
4 Comments
GorillaMoe
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...
GorillaMoe
@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!
James Hill
@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: robertnyman.com/2008/11/20/….
akhil verma
how to get the displayed content collapse on another click ?
onclickattributes. Please see Show/hide 'div' using JavaScript instead. Inline event handlers likeonclickare not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always useaddEventListenerinstead.