HTML5, div, hidden, show on click

Question

I have a div with a button at the end. I want that when someone presses that button another div (below the previous one) should appear with the content I have put it 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 the jquery with script:

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

The problem I am having is that the second div is appearing on page load itself initially and when I am clicking on the button its disappearing. What should I do?

Answer 1

HTML5 enables you to do it easily using 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 the demo: https://jsfiddle.net/3wqyyf7m/

Answer 2

If you want an element to be hidden at first load, you can use the hidden attribute;

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

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

Read more at: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden

This is a relatively new attribute so if you need to support old browsers you can put this in your css to make it work;

*[hidden] { display: none; }

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