Menu
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" > 
297
To duplicate a div onclick event with JavaScript, we can call cloneNode` to clone an element. Then we can set the onclick property of the cloned element to the same event handler function as the original element. to add a div. Then we deep clone the element by calling cloneNode with true .
To display or hide a <div> by a <button> click, you can add the onclick event listener to the <button> element. The onclick listener for the button will have a function that will change the display attribute of the <div> from the default value (which is block ) to none .
First, select the div element which need to be copy into another div element. Select the target element where div element is copied. Use the append() method to copy the element as its child.
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/
160
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. }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
