title: jQuery datepicker - change display of .ui-datepicker-calendar after init
body: <p>How can I change the css display attribute of the ui-datepicker-calendar class after the datepicker has already been initialized? I have a html form with a selectable checkbox from which I want to toggle the display of this table. I've tried the following:</p>
  
  <p>HTML sample:</p>
  
  <pre><code> &lt;div class="row"&gt;
    &lt;div class="adddescr"&gt;&lt;label for="date"&gt;Zeitraum:&lt;/label&gt;&lt;/div&gt;
    &lt;div class="addinput" id="date"&gt;&lt;input type="text" id="datefrom" name="datefrom" class="date" /&gt; - &lt;input type="text" id="dateto" name="dateto" class="date" /&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="row"&gt;
    &lt;div class="addinput"&gt;&lt;label&gt;&lt;input type="checkbox" id="dateplanedcheck" /&gt; grobe Planung&lt;/label&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>JS first approach:</p>
  
  <pre><code> &lt;script&gt;
    $(document).ready(function() {
     $("#datefrom, #dateto").datepicker({ dateFormat: "dd.mm.yy",
  
     [...]
  
      beforeShow: function(input, inst) {
       if ($("#dateplanedcheck").is(':checked')) {
        $(".ui-datepicker-calendar").css("display", "none");
      }}
     });
  
     [...]
  
    });
   &lt;script&gt;
  </code></pre>
  
  <p>The beforeShow is called, but the calender is still displayed.</p>
  
  <p>JS second approach:</p>
  
  <pre><code> &lt;script&gt;
    $(document).ready(function() {
  
    [....]
  
     $("#dateplanedcheck").change(function() {
      if ($(this).is(':checked')) {
        $(".ui-datepicker-calendar").css("display", "none");
      }
     });
    });
   &lt;/script&gt;
  </code></pre>
  
  <p>What am I missing? Does this even work with jQuery?
  Thanks in advance!</p>