user3049652 user3049652 - 5 months ago 8
jQuery Question

Vertical Menu that hide divs

The question is pretty noobish but because i have not knowledge in jQuery yet none of the answer so far can help...

Here is what I have do so far:

<ul class="menu">
<li class="option">option1</li>
<li class="option">option2</li>
<li class="option">option3</li>
</ul>

<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>


The general idea is to make a vertical menu that each option can hide the previous div (whoever div is that) and show the current. The problem is that I don't know how to make the jQuery hide the previous div whoever that may be.

Answer
Try some thing like this

<ul class="menu">
     <li class="option">option1</li>
     <li class="option">option2</li>
     <li class="option">option3</li>
</ul>

<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>

$(function(){
    $('.option').click(function(){
        var index=$(this).index();
        $('.content').hide().eq(index).show();
    });

    $('.content').eq(0).hide();
})