jQuery show hide divs on radio buttons

Posted by RyanP13 on Stack Overflow See other posts from Stack Overflow or by RyanP13
Published on 2010-03-15T10:58:52Z Indexed on 2010/03/15 10:59 UTC
Read the original article Hit count: 451

I have got a group of radio buttons that when clicked need to display a corresponding unordered list. I have got as far as showing the correct list according to which radio button is clicked but cannot figure out how to hide the other lists that need to be hidden. So if i click the second benefits radion then the second 'spend' ul will display and the other 'spend' uls will hide.

This is my jQuery:

// hide all except first ul
$('div.chevron ul').not(':first').hide();

//
$('div.chevron > ul > li > input[name=benefits]').live('click',function() { 

    // work out which radio has been clicked
    var $radioClick = $(this).index('div.chevron > ul > li > input[name=benefits]');
    var $radioClick = $radioClick + 1;

    $('div.chevron > ul').eq($radioClick).show();

});

// trigger click event to show spend list
var $defaultRadio = $('div.chevron > ul > li > input:first[name=benefits]')
$defaultRadio.trigger('click');

And this is my HTML:

        <div class="divider chevron">
        <ul>
            <li><strong>What benefit are you most interested in?</strong></li>
            <li>
                <input type="radio" class="inlineSpace" name="benefits" id="firstBenefit" value="Dental" checked="checked" />
                <label for="firstBenefit">Dental</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="benefits" id="secondBenefit" value="Optical" />
                <label for="secondBenefit">Optical</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="benefits" id="thirdBenefit" value="Physiotherapy" />
                <label for="thirdBenefit">Physiotherapy, osteopathy, chiropractic, acupuncture</label>
            </li>
        </ul>
        <ul>
            <li><strong>How much do you spend a year on Dental?</strong></li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate1a" value="£50" />
                <label for="rate1a">&pound;50</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate2a" value="£100" />
                <label for="rate2a">&pound;100</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate3a" value="£150" />
                <label for="rate3a">&pound;150</label>
            </li>           
        </ul>
        <ul>
            <li><strong>How much do you spend a year on Optical?</strong></li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate1b" value="£50" />
                <label for="rate1a">&pound;50</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate2b" value="£100" />
                <label for="rate2a">&pound;100</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate3b" value="£150" />
                <label for="rate3a">&pound;150</label>
            </li>           
        </ul>
        <ul>
            <li><strong>How much do you spend a year on Physiotherapy, osteopathy, chiropractic, acupuncture?</strong></li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate1c" value="£50" />
                <label for="rate1a">&pound;50</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate2c" value="£100" />
                <label for="rate2a">&pound;100</label>
            </li>
            <li>
                <input type="radio" class="inlineSpace" name="spend" id="rate3c" value="£150" />
                <label for="rate3a">&pound;150</label>
            </li>           
        </ul>
        <label class="button"><input type="submit" value="View your quote" class="submit" /></label>
    </div>

I tried using:

$('div.chevron > ul').not($radioClick).hide();

But that yielded a bad result where all the lists where hidden.

Thanks in advance.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript