javascript - Getting a display:none div to toggle (so that it displays) when a button is pressed, and then *stay* displayed? -

i have div set display:none.

i have button that, using jquery code, displays div.

i when user hits button again, nothing happens -- div remains displayed regardless.

how can achieved?

the code i'm using: http://jsfiddle.net/el2au/

js:

$('#mybtn').click(function() {     $('#mydiv').toggle(); }); 

html:

<div id="mydiv" style="display: none">     hello div </div> <button id="mybtn">toggle div</button> 

css:

#mydiv {     background-color: red;      color: blue;      height: 50px } 

thank you.

if want show #mydiv only, replace .toggle() .show() if want show/hide, please use following code.

$('#mybtn').click(function() {    if ($('#mydiv').is(":visible")) {      $('#mydiv').hide();    } else {      $('#mydiv').show();    }  });

#mydiv {    background-color: red;    color: blue;    height: 50px  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <div id="mydiv" style="display: none">    hello div  </div>  <button id="mybtn">toggle div</button>