jQuery close and open only one element at once

Before going into my problem, I will post reference where I found partial solution:

• Here is the answer to my similar problem

Now first I will post my whole example on jsFiddle, stripped down of unnecessary stuff:

• My example

I will also post the code here:

• HTML:

<ol class="decimalListFirstOl">
<li class="decimalListLi">
    Test1
    <ol class="decimalListSecondOl">
         <li class="columns decimalListLi">
            Test1<span class="show">+</span>
            <div class="hide">
                <ul class="defaultFont">
                    <li>Test1</li>
                    <li>Test2</li>
                    <li>...</li>
                </ul>
            </div>
        </li>
        <li class="columns decimalListLi">
            Test2
            <span class="show">+</span>
            <div class="hide">
                <ul class="defaultFont">
                    <li>Test1</li>
                    <li>Test2</li>
                    <li>...</li>
                </ul>
            </div>
        </li>
        <li class="columns decimalListLi">
            Test3
            <span class="show">+</span>
            <div class="hide">
                <ul class="defaultFont">
                    <li>Test1</li>
                    <li>Test2</li>
                    <li>...</li>
                </ul>
            </div>
        </li>
    </ol>
</li>

• CSS:

.hide {
display: none;
}
.columns {
    float: left;
    width: 33%;
}
.decimalListLi {
    color: #627490;
    display: block;
}
.decimalListLi:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}
.decimalListFirstOl {
  开发者_如何学JAVA  counter-reset: item;
    font-size: 17px;
    font-weight: bold;
    padding-left: 0;
}
.decimalListSecondOl {
    counter-reset: item;
    font-size: 15px;
    font-weight: normal;
    padding-left: 25px;
}
.defaultFont {
    color: #525252;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    font-size: 12px;
}

• JAVASCRIPT/JQUERY:

$(document).ready(function() {
    $('.show').click(function() {
        var index = $(this).index();
        $('.hide').eq(index).slideToggle("slow").siblings('.hide').hide();
    });
});

I am using jQuery 1.6.2. I want that one click on the sign(+), closes currently opened column and the clicked column opens (slides down). I have already achieved the opening and closing, but for some reason it always opens and closes the first column, no matter which + is clicked. Now I have followed the answer on first link, but the problem is, I have nested ol and li and that's why probably this line of code:

var index = $(this).index();

for some reason always returns 0! Which means it will always open and close the first column.

your toggle buttons are index '0' cause their .index() is referenced to 'index of element in parent' And there's only 1 '.show' inside 'his' li parent.

So just look for the parent index() using

 var index = $(this).parent().index(); 

AND HERE IS A DEMO TO TOGGLE ALREADY OPENED MENUS:

DEMO

$(document).ready(function() {
    $('.show').click(function() {
        var index = $(this).parent().index();
        $('.hide').hide();
        $('.hide').eq(index).slideToggle("slow");      
    });
});

You can use this solution too ( using .next('.hide') It will look for the next element .hide) :

$(document).ready(function() {
    $('.show').click(function() {
        $('.hide').hide();
        $(this).next('.hide').slideToggle();
    });
});

siblings() will only get elements that have the same parent.

var target = $(this).siblings(".hide"); //Get the div that corresponds to the plus we just clicked.
$(".hide").not(target).hide(); //Hide hidable elements that are not the target
target.slideToggle();          //Toggle the targetted div

You should switch over to the each() method to set up your event.

$('.show').each(function(index)
{
    var closureReference = index;
    $(this).click(function()
    {
        $('.hide').eq(closureReference).slideToggle("slow").siblings('.hide').hide();
    }
});