Radio Button Behavior

by Joe Saad

HTML

<!-- input:radio#payByCard[name="paymentMethod"]+label[for="payByCard"]{Pay By Card}+.optionBox(h2{Pay By Card}+p{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero in tempore illo dolor tempora excepturi ratione laborum id doloremque. Iusto fuga laborum commodi magnam consectetur odit laboriosam accusantium corporis.})+input:radio#payByBank[name="paymentMethod"]+label[for="payByBank"]{Pay By Bank Account}+.optionBox(h2{Bank Account Details}+p{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero in tempore illo dolor tempora excepturi ratione laborum id doloremque. Iusto fuga laborum commodi magnam consectetur odit laboriosam accusantium corporis.}) -->

<input type="radio" name="paymentMethod" id="payByCard">
<label for="payByCard">Pay By Card</label>
<div class="optionBox">
    <h2>Pay By Card</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero in tempore illo dolor tempora excepturi ratione laborum id doloremque. Iusto fuga laborum commodi magnam consectetur odit laboriosam accusantium corporis.</p>
</div>
<input type="radio" name="paymentMethod" id="payByBank">
<label for="payByBank">Pay By Bank Account</label>
<div class="optionBox">
    <h2>Bank Account Details</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero in tempore illo dolor tempora excepturi ratione laborum id doloremque. Iusto fuga laborum commodi magnam consectetur odit laboriosam accusantium corporis.</p>
</div>

CSS

.optionBox {display: none; clear:both;}

JavaScript

$('input:radio').click(function(){
		var $this = $(this);
		$('.optionBox').hide();
		if ($this.is(':checked')){
			$this.next('label').next('.optionBox').show();
		}
	});