CODEWITHSUNDEEP
javascriptjqueryhtml
Navneet Malviya
Navneet Malviya

Reputation: 141

HTML5, div, hidden, show on click

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?

Upvotes: 13

Views: 46656

Answers (8)

ceving
ceving

Reputation: 23866

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>

Upvotes: 0

L01c
L01c

Reputation: 1063

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/

Upvotes: 20

Eloy
Eloy

Reputation: 41

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

Upvotes: 4

Sandesh
Sandesh

Reputation: 1220

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>

Upvotes: 2

xec
xec

Reputation: 18024

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

Upvotes: 6

Joshua Griffiths
Joshua Griffiths

Reputation: 417

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

Upvotes: 1

Patrick
Patrick

Reputation: 166

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/

Upvotes: 1

Vinc199789
Vinc199789

Reputation: 1046

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.

Upvotes: 1

Related Questions