Hiding billing section when “same as shipping address” checkbox is clicked?

Question

How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!

(posting some words here since I can't post due to having more code than text so ignore this part)

I attached a snipped below of my code so hopefully this helps:

 .checkbox-custom, .radio-custom { margin: 0 auto; width: 40%; opacity: 0; position: absolute; } .checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } .checkbox-custom-label, .radio-custom-label { position: relative; } .checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before { content: ''; background: #fff; border: 1px solid #717171; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 2px; margin-right: 10px; text-align: center; } .checkbox-custom:checked + .checkbox-custom-label:before { content: "\\f00c"; font-family: 'FontAwesome'; font-size: 20px; color: #a1cdad; } .radio-custom + .radio-custom-label:before { border-radius: 50%; } .radio-custom:checked + .radio-custom-label:before { content: "\\f00c"; font-family: 'FontAwesome'; font-size: 20px; color: #a1cdad; } 

  <form class="form1"> <h6>Shipping Address</h6> <div class="input-box"> <input type="text" id="first-name" placeholder="John" data-type="name"/> <label for="first-name"><p>First Name</p></label> </div> <div class="input-box"> <input type="text" id="last-name" placeholder="Smith" data-type="name"/> <label for="last-name"><p>Last Name</p></label> </div> <div class="input-box"> <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/> <label for="phone-number"><p>Phone Number</p></label> </div> <div class="input-box"> <input type="text" id="company" placeholder="Company" data-type="name"/> <label for="company"><p>Company Name</p></label> </div> <div class="input-box"> <input type="text" id="address" placeholder="123 Main Street" data-type="text"/> <label for="address" data-type="name"><p>Address</p></label> </div> <div class="input-box"> <input type="text" id="city" placeholder="Everytown" data-type="text"/> <label for="city" data-type="name"><p>City</p></label> </div> <div class="input-box"> <select id="card-type"> <option><p>Texas</p></option> <option><p>Louisiana</p></option> <option><p>New Mexico</p></option> <option><p>Oklahoma</p></option> </select> <label for="card-type"><p>State</p></label> </div> <div class="input-box"> <input type="text" id="zip" placeholder="12345" data-type="text"/> <label for="zip" data-type="text"><p>Address</p></label> </div> <div class="input-box"> <select id="card-type"> <option><p>United States</p></option> </select> <label for="card-type"><p>Country</p></label> </div> <div class="input-box"> <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/> <label for="email"><p>Email Address</p></label> </div> </form> <form class="form2"> <h6>Billing Address</h6> <div> <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked> <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label> </div> <div class="input-box"> <input type="text" id="first-name" placeholder="John" data-type="name"/> <label for="first-name"><p>First Name</p></label> </div> <div class="input-box"> <input type="text" id="last-name" placeholder="Smith" data-type="name"/> <label for="last-name"><p>Last Name</p></label> </div> <div class="input-box"> <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/> <label for="phone-number"><p>Phone Number</p></label> </div> <div class="input-box"> <input type="text" id="company" placeholder="Company" data-type="name"/> <label for="company"><p>Company Name</p></label> </div> <div class="input-box"> <input type="text" id="address" placeholder="123 Main Street" data-type="text"/> <label for="address" data-type="name"><p>Address</p></label> </div> <div class="input-box"> <input type="text" id="city" placeholder="Everytown" data-type="text"/> <label for="city" data-type="name"><p>City</p></label> </div> <div class="input-box"> <select id="card-type"> <option><p>Texas</p></option> <option><p>Louisiana</p></option> <option><p>New Mexico</p></option> <option><p>Oklahoma</p></option> </select> <label for="card-type"><p>State</p></label> </div> <div class="input-box"> <input type="text" id="zip" placeholder="12345" data-type="text"/> <label for="zip" data-type="text"><p>Address</p></label> </div> <div class="input-box"> <select id="card-type"> <option><p>United States</p></option> </select> <label for="card-type"><p>Country</p></label> </div> <div class="input-box"> <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/> <label for="email"><p>Email Address</p></label> </div> </form> 

Answer 1

I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)

 .checkbox-custom:checked ~.input-box { visibility: hidden; opacity: 0; } 

 <form class="form2"> <h6>Billing Address</h6> <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked> <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label> <div class="input-box"> <input type="text" id="first-name" placeholder="John" data-type="name" /> <label for="first-name"><p>First Name</p></label> </div> <div class="input-box"> <input type="text" id="first-name" placeholder="John" data-type="name" /> <label for="first-name"><p>First Name</p></label> </div> </form> 

Answer 2

1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content. 2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'