HTML5, div, hidden, show by click

Question

I have a div with a button at the end. I want that when someone clicks on this button, another div (below the previous one) should appear with the content that I placed inside the div.

I am using the following code:

HTML:

<div> <a id="button" href="#">REGISTER</a> </div> <br> <br> <div id="item"> <iframe src="some source" embedded=true" width="760" height="550" frameborder="0" marginheight="0" marginwidth="0">Loading</iframe> </div> 

and jquery with script:

 <script> $(function() { $( "#button" ).click(function() { $( "#item" ).toggle(); }); }); </script> 

The problem I am facing is that the second div appears on the initial loading of the page, and when I click the button, it disappears. What should I do?

Answer 1

HTML5 makes it easy to do this with the details tag.

 <details> <summary>Click to toggle division</summary> <p>Here you can put some content...</p> <p>... and anything else you want :)</p> </details> 

Here is a demo: https://jsfiddle.net/3wqyyf7m/

Answer 2

If you want the element to be hidden on first boot, you can use the hidden attribute;

 <div id="item" hidden>...</div> 

Demo: http://jsfiddle.net/xztwnp7f/1/

More details: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden

This is a relatively new attribute, so if you need to support older browsers, you can put this in your CSS for it to work,

 *[hidden] { display: none; } 

Source: http://davidwalsh.name/html5-hidden

Answer 3

Try the following:

 <div> <button type="button" id="show">Show Content</button> <button type="button" id="hide">Hide Content</button> </div> <div id="item" hidden> Some hidden content </div> $( "#show" ).click(function() { $('#item').show(); }); $( "#hide" ).click(function() { $('#item').hide(); }); 

Jsfiddle

Answer 4

change toggle () to show ()
the show () attribute shows only the div. It will not hide the div again when you click the button again.

Answer 5

I think this is what you want to do:

 <button>Toggle</button> <p>Hello</p> <p style="display: none">Good Bye</p> <script> $( "button" ).click(function() { $( "p" ).toggle(); }); </script> 

Copy-paste from http://api.jquery.com/toggle/

Answer 6

First, you missed " on embedded=true"

There are several ways to do this using jQuery; I added display: none in the iframe CSS instead of adding a style element.

 #regFrame{ display: none; } <div> <a id="button" href="#">REGISTER</a> </div> <br> <br> <div id="item"> <iframe id="regFrame" src="http://placekitten.com/g/760/550" embedded="true" width="760" height="550" frameborder="0" marginheight="0" marginwidth="0"> Loading </iframe> </div> $('#button').click(function(){ //$('#regFrame').show(); //$('#regFrame').toggle(); //To hide the iframe when the button is clicked again //$('#regFrame').show(500); //To fade in the iframe $('#regFrame').toggle(500); //To fade the iframe in and out }); 

See JSFiddle

Answer 7

Create html div

  function showhide() { var div = document.getElementById(“newpost"); if (div.style.display !== "none") { div.style.display = "none"; } else { div.style.display = "block"; } } 

This div will show and hide when a button is clicked.

  <button id="button" onclick="showhide()">Click Me</button>