jQuery show hide divs on radio buttons

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;开发者_如何学Python150</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.

This will hide the currently visible one.. ( you should run it before showing the newly clicked ul )

$('div.chevron > ul:visible').hide();

thanks. I solved it with:

        $('div.chevron > ul:visible').hide();
    $('div.chevron > ul:first').show();
    $('div.chevron > ul').eq($radioClick).show();

I don't know what it is but i always seem to over complicate stuff like this in my code when the answer is very easy.