Skip to content

Instantly share code, notes, and snippets.

@NetOpWibby
Created June 14, 2017 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NetOpWibby/4c55f086848969e2284f28af946fae6c to your computer and use it in GitHub Desktop.
Save NetOpWibby/4c55f086848969e2284f28af946fae6c to your computer and use it in GitHub Desktop.
Form radio toggles, sans JS
<form class="form">
<legend class="form__headline">Billing Info</legend>
<fieldset class="form__section">
<input type="radio" name="payment-method" value="stripe" class="form__section__radio" checked/>
<label>Credit Card</label>
<div class="form__section__content">
<button>Secure checkout</button>
</div>
</fieldset>
<fieldset class="form__section">
<input type="radio" name="payment-method" value="apple-pay" class="form__section__radio"/>
<label>Apple Pay</label>
<div class="form__section__content">
<button>Secure checkout</button>
</div>
</fieldset>
<fieldset class="form__section">
<input type="radio" name="payment-method" value="paypal" class="form__section__radio"/>
<label>PayPal</label>
<div class="form__section__content">
<button>Secure checkout</button>
</div>
</fieldset>
</form>
.form__section__radio {
// style
& ~ label {
// style
}
&:not(:checked) {
// style
& ~ label ~ .form__section__content {
margin: 0; padding: 0;
height: 0;
opacity: 0;
visibility: hidden;
}
}
&:checked {
// style
& ~ label ~ .form__section__content {
// add margin/padding that works for you
opacity: 1;
visibility: visible;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment