javascript - HTML5, div, hidden, show on click - Stack Overflow

admin管理员组

文章数量:1026989

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?

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 12, 2015 at 12:03 halfer 20.4k1919 gold badges108108 silver badges201201 bronze badges asked Aug 25, 2014 at 14:12 Navneet MalviyaNavneet Malviya 14111 gold badge11 silver badge33 bronze badges 5

• You need to prevent the default submit action of a tag – karthikr Commented Aug 25, 2014 at 14:13
• 1 @karthikr - His href is # so it wouldn't make a difference other than stopping the page from jumping back to the top. – j08691 Commented Aug 25, 2014 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 Commented Aug 25, 2014 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 toggled to be visible. – GolezTrol Commented Aug 25, 2014 at 14:19
• Could use JQuerys addClass/removeClass to add and remove a class that would contains css display:none/block? – Sebastien Commented Aug 25, 2014 at 14:22

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 20

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/

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

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

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 be show and hide on button click

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

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.

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/

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 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>

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?

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 12, 2015 at 12:03 halfer 20.4k1919 gold badges108108 silver badges201201 bronze badges asked Aug 25, 2014 at 14:12 Navneet MalviyaNavneet Malviya 14111 gold badge11 silver badge33 bronze badges 5

• You need to prevent the default submit action of a tag – karthikr Commented Aug 25, 2014 at 14:13
• 1 @karthikr - His href is # so it wouldn't make a difference other than stopping the page from jumping back to the top. – j08691 Commented Aug 25, 2014 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 Commented Aug 25, 2014 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 toggled to be visible. – GolezTrol Commented Aug 25, 2014 at 14:19
• Could use JQuerys addClass/removeClass to add and remove a class that would contains css display:none/block? – Sebastien Commented Aug 25, 2014 at 14:22

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 20

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/

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

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

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 be show and hide on button click

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

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.

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/

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 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>

本文标签： javascriptHTML5divhiddenshow on clickStack Overflow