Show/Hide div using bootstrap checkbox - require inputs to be entered only if checkbox is checked
<p>Ok,  I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.</p>

<p>if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.</p>

<p>If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered.  (desired action, but the div doesn't hide or show when the checkbox is checked)</p>

<p>How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?</p>

<p>I'm using this as the HTML:  </p>

<pre><code>                    &lt;div class="col-md-1"&gt;
                    &lt;input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no"&gt;
                    &lt;/div&gt;
                    &lt;label for="chShipAdd" class="col-md-3 control-label"&gt;Shipping Information?&lt;/label&gt;
                        &lt;div id="shipadddiv" style="visibility: hidden;"&gt;
                            &lt;div class="collapse" id="moreabout" &gt;
                                &lt;div class="form-group"&gt;
                                    &lt;div class="col-md-12"&gt;
                                        &lt;br&gt;
                                        &lt;input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)"  class="form-control shipClass" required&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;div class="col-md-4"&gt;
                                        &lt;input id="sCity" name="sCity" type="text" placeholder="City (required)" required  class="form-control shipClass"&gt;
                                    &lt;/div&gt;
                                    &lt;div class="col-md-4"&gt;
                                        &lt;input id="sState" name="sState" type="text" placeholder="State (required)" required  class="form-control shipClass"&gt;
                                    &lt;/div&gt;
                                    &lt;div class="hidden-lg hidden-md"&gt;&amp;nbsp;&lt;/div&gt;
                                    &lt;div class="col-md-4"&gt;
                                        &lt;input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required  class="form-control shipClass"&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;  
                        &lt;/div&gt;
</code></pre>

<p>and the javascript:  </p>

<pre><code>function ChangeShip() {
      if (!(document.getElementById('chShipAdd').checked)) {
       document.getElementById('shipadddiv').style.visibility="hidden";
       $(".shipClass").prop("disabled",true);
      }
      else {
      document.getElementById('shipadddiv').style.visibility="visible";
      $(".shipClass").prop("disabled",false);
      }
  }
</code></pre>

<p>Any solution that WORKS will be acceptable.  I've bashed my brain all day trying to do this simple action.   I've tried .prop  .attribute  .setAttribute .removeAttribute, and much much more.</p>

<p>Any Advice?</p>