Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.

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.

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)

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

I'm using this as the HTML:

                    <div class=col-md-1>

                    <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>

                    </div>

                    <label for=chShipAdd class=col-md-3 control-label>Shipping Information?</label>

                        <div id=shipadddiv style=visibility: hidden;>

                            <div class=collapse id=moreabout >

                                <div class=form-group>

                                    <div class=col-md-12>

                                        <br>

                                        <input id=sStreet name=sStreet type=text placeholder=Street Name (required)  class=form-control shipClass required>

                                    </div>

                                </div>

                                <div class=form-group>

                                    <div class=col-md-4>

                                        <input id=sCity name=sCity type=text placeholder=City (required) required  class=form-control shipClass>

                                    </div>

                                    <div class=col-md-4>

                                        <input id=sState name=sState type=text placeholder=State (required) required  class=form-control shipClass>

                                    </div>

                                    <div class=hidden-lg hidden-md>&nbsp;</div>

                                    <div class=col-md-4>

                                        <input id=sZipcode name=sZipcode type=text placeholder=Zip (required) required  class=form-control shipClass>

                                    </div>

                                </div>

                            </div>  

                        </div>

and the javascript:

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);

      }

  }

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.

Any Advice?