javascript - Show/Hide div using bootstrap checkbox - require inputs to be entered only if checkbox is checked

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:

                    

                    
                    
                    Shipping Information?
                        

                            

                                

                                    

                                        
                                        
                                    
                                
                                

                                    

                                        
                                    
                                    

                                        
                                    
                                    
 
                                    

                                        
                                    
                                
                            
                        

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?