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?

@karthikr - His href is `#` so it wouldn't make a difference other than stopping the page from jumping back to the top. — j08691, Aug 25 '14 at 14:14
What style is being applied to the second div? You must default it to hidden, or it will be displayed by default. The reason it disappears is you are calling toggle on it when it is displayed, so it hides it. — forgivenson, Aug 25 '14 at 14:15
I see you edited the question, so `style` attribute (which had a typo) was removed. My previous comment still applies, though: The element should be initially hidden, so it can be *toggle*d to be visible. — GolezTrol, Aug 25 '14 at 14:19
Could use JQuerys addClass/removeClass to add and remove a class that would contains css `display:none/block`? — Sebastien, Aug 25 '14 at 14:22

score 19 · Answer 1 · answered Jun 08 '16 at 14:54

19

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/

answered Jun 08 '16 at 14:54

L01c

1,033
10
19

Thank you and using internally! Note that this remains unsupported in late 2016 by IE / Edge : http://caniuse.com/#feat=details – here Nov 26 '16 at 01:32
Under development in Edge as of late 2017 – leo Sep 08 '17 at 13:35

xec · Answer 2 · 2014-08-26T07:11:07.330

6

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

edited Aug 26 '14 at 07:11

answered Aug 25 '14 at 14:18

xec

17,349
3
46
54

@Sebastien Absolutely, if you love to type :) – xec Aug 25 '14 at 14:22
Well the choice between the two is merely a question of do you want the element that is hidden to take up space on your page or not. If you want space on the page to still be allocate even if the element is not visible use `hidden` if not use `display`. – Sebastien Aug 25 '14 at 14:28
@Sebastien Incorrect. An element with `display: none;` behaves exactly like `hidden` and will not take up any space - you're probably confusing it with `visibility: hidden;` – xec Aug 25 '14 at 14:29
@Sebastien Using the `hidden` attribute has the same properties as the css `display:none;`. Using `visibility:hidden;` css is when the space remains allocated. – worldofjr Aug 25 '14 at 14:37
@Sebastien No, you are wrong. The `hidden` attribute isn't mentioned at all in that question. The `hidden` attribute appears like this: ` – worldofjr Aug 25 '14 at 15:26
Same name = confusing... Me much dumb me should stop posting stackOveflow XP – Sebastien Aug 25 '14 at 15:35

score 4 · Answer 3 · edited Mar 09 '16 at 21:00

4

Try this:

<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

edited Mar 09 '16 at 21:00

GAntoine

1,265
2
16
28

answered Mar 09 '16 at 20:19

Eloy

41
1

score 2 · Answer 4 · answered Dec 30 '14 at 09:36

Create html div

 function showhide()
{
   var div = document.getElementById(&ldquo;newpost");

if (div.style.display !== "none") {

div.style.display = "none";

}

else {

div.style.display = "block";

}

 }

This div will be show and hide on button click

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

score 1 · Answer 5 · answered Aug 25 '14 at 14:18

1

change toggle() to show()
the show() attribute shows the div only. It don't hide the div again when you click again on the button.

answered Aug 25 '14 at 14:18

Vinc199789

1,046
1
10
31

score 1 · Answer 6 · edited Aug 25 '14 at 14:25

1

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/

edited Aug 25 '14 at 14:25

worldofjr

3,868
8
37
49

answered Aug 25 '14 at 14:20

Patrick

166
2
14

Joshua Griffiths · Answer 7 · 2014-08-25T14:49:52.903

Firstly, you've missed a " on embedded=true"

There's a number of ways you may want to do this with JQuery; I've added display: none to the iframe's CSS rather than add 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

You are totally correct; thus I've amended my answer. In terms of hiding the iframes, that's beyond the scope of the question but I do agree and have updated the css with the ID — Joshua Griffiths, Aug 25 '14 at 14:51

score 0 · Answer 8 · answered Nov 23 '18 at 11:32

You can create something like details easily from scratch:

document.querySelectorAll('div.details').forEach(function(div) {
  div.querySelectorAll('span.handle').forEach(function(span) {
    span.addEventListener('click', function (event) {
      if (div.dataset.expanded == 'true')
        div.dataset.expanded = 'false';
      else
        div.dataset.expanded = 'true';
    });
  });
});

div.details > span.handle:after {
  pointer-events: all;
}

div.details[data-expanded="true"] > span.handle:after {
  content: '▼';
}

div.details[data-expanded="false"] > span.handle:after {
  content: '►';
}

div.details[data-expanded="true"] > div.body {
  display: table;
}

div.details[data-expanded="false"] > div.body {
  display: none;
}

<div class="details" data-expanded="false">
  <span class="handle"></span>
  <span class="summary">Hello World!</span>
  <div class="body">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua.
  </div>
</div>

HTML5, div, hidden, show on click

8 Answers8

Linked