Inputs change content displayed

Use .data() to determine which elements should be shown/hidden.

by Erik Woods

HTML

<div>
    <input id="term-option-a" name="term-option" type="radio" />
    <label data-is-hidden="[1]" for="term-option-a">A Years</label>
</div>
<div>
    <input id="term-option-b" name="term-option" type="radio" />
    <label data-is-hidden="[2,3]" for="term-option-b">B Years</label>
</div>

<div data-option="1">Option 1</div>
<div data-option="2">Option 2</div>
<div data-option="3">Option 3</div>

<!-- ignore this bit -->
<footer>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

SCSS

/* IGNORE THIS BIT YO */
footer {
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

footer p {
    margin: 0;
}

JavaScript

$('[name="term-option"]').on('change', function () {
    var hiddenOptions = $(this).filter(':checked').next().data('isHidden');

    $('[data-option]').slideDown();

	$.each(hiddenOptions, function (k) {
        $('[data-option="' + hiddenOptions[k] + '"]').slideUp();
    });
});