JQuery: How to hide/display a div depending on the initial state of a checkbox?
<p>Let's say I've this a checkbox and a div that contains elements that I want to <strong>hide/display</strong> depending on the checkbox being checked or not.</p>

<pre><code>&lt;input type = "checkbox" id = "myCheckbox"/&gt;
&lt;div id = "display-hide"&gt;
  //Contains more elements
&lt;/div&gt;
</code></pre>

<p>Now, here is the JQuery script that does the trick. </p>

<pre><code>&lt;script type = "text/javascript"&gt;
  $(function () {
    $("#myCheckbox").click(function(){
        $("#display-hide").toggle(this.checked);
     });
      $("#display-hide").hide();
  });    
&lt;/script&gt;
</code></pre>

<p>The first time I access the page, everything works fine (i.e. div is hidden - when I check the checkbox, the div is displayed).</p>

<p>BUT, when I come back to the page (to edit, for instance), no-matter the value of the checkbox (checked or not), the div is hidden first. The div becomes only visible after I uncheck then check again. </p>

<p>I guess that because of this statement:</p>

<pre><code>$("#display-hide").hide();
</code></pre>

<p>Is there anyway to verify the value of the checkbox and hide/show the div accordingly?</p>

<p>Thanks for helping</p>
