Question

I have two DIV’s. One has a list and the other has a collections of DIV’s.

<div>
    <ul>
        <li><a>One</a></li>
        <li><a>Two</a></li>
        <li><a>Three</a></li>
    </ul>
</div>
<div>
    <div>Some content one</div>
    <div>Some content two</div>
    <div>Some content three</div>
</div>

When I click on the hyperlink ‘One’, I want to show the first DIV(Some content one) and hide all the other DIVs. When I click on the hyperlink ‘Two’, I want to show second DIV(Some content two) and hide all the others. How can I accomplish this using arrays in jQuery? Any other method is fine too.

Thanks for your time.

Answer 1

$('li').click(function() {
    var which = $(this).index();
    $('div').find('div').hide().eq(which).show();
});

Working fiddle