Hide/Show Based on Radio Button Click

Question

I've been searching for a few hours now and haven't been able to get an aspect of my code working.

I have two radio buttons for a div, and I want it so if I select Yes, it shows one slider, if I selected No, it shows another.

Below is the .html:

<fieldset data-role="controlgroup">
    <legend>
        <h>Do you like pie?</h>
    </legend>
    <input type="radio" name="do-you-like-pie" id="do-you-like-pie-yes" value="do-you-like-pie-yes" checked="checked" />
    <label for="do-you-like-pie-yes">Yes</label>
    <input type="radio" name="do-you-like-pie" id="do-you-like-pie-no" value="do-you-like-pie-no" />
    <label for="do-you-like-pie-no">No</label>
</fieldset>
<!-- first slider -->
<div data-role="fieldcontain" class="show-hide-like-pie-no">
    <label for="like-pie-yes-slider">
        <h>How much?</h>
    </label>
    <input type="range" name="like-pie-yes-slider" id="like-pie-yes-slider" value="25" min="0" max="100" data-highlight="true" />
</div>
<!-- 2nd slider -->
<div data-role="fieldcontain" class="show-hide-like-pie-yes">
    <label for="like-pie-no-slider">
        <h>How litle?</h>
    </label>
    <input type="range" name="like-pie-no-slider" id="like-pie-no-slider" value="100" min="0" max="200" data-highlight="true" />
</div>

Below is the .js:

function getAuto() {
    if ($('#do-you-like-pie-yes').is(':checked')) {
        return true;
    } else {
        return false;
    }
}

//$('do-you-like-pie').on('click',function () {
//   if ($('#do-you-like-pie-yes').is(':checked')) {
if (getAuto() == "true") {
    $(".show-hide-like-pie-yes").show();
    $(".show-hide-like-pie-no").hide();
} else {
    $(".show-hide-like-pie-yes").hide();
    $(".show-hide-like-pie-no").show();
}
//});

Any help would be greatly appreciated!

Here is the fiddle link: http://jsfiddle.net/DjT5X/

Thanks!

Kind Regards,

Gary

edit: the trouble with other solutions is that they don't use an "if"

Answer 1

Fixed - Just used change(function())