Show / hide dependencies
by Alvin Olavarrieta
HTML
<label class="radio-inline">
<input type="radio" name="r1" value="1" data-show=".test1" data-hide=".test2"> yes
</label>
<label class="radio-inline">
<input type="radio" name="r1" value="1" data-show=".test2" data-hide=".test1"> No
</label>
<div class="test1">Test 1</div>
<div class="test2">Test 2</div>
JavaScript
$('[data-show], [data-hide], [data-toggle]').click(function (event) {
var input = $(this);
var show = input.data('show');
var hide = input.data('hide');
var toggle = input.data('toggle');
show ? $(show).removeClass('hide') : '';
hide ? $(hide).addClass('hide') : '';
toggle ? $(toggle).toggleClass('hide') : '';
//event.stopPropagation();
});