Question

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 {
    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.

Answer 1

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();
    });
});