Toggle show/hide issue

Question

Hy,

I have a small problem, with the following HTML code & JS

<ul class="categories">
   <a href="#" class="togglelink"><li class="furniture">Furniture</li></a>  
   <a href="" class="togglelink"><li class="general-items">General</li></a>
   <a href="" class="togglelink"><li class="cars">Cars</li></a>
   <a href="" class="togglelink"><li class="moto">Moto</li></a> 
   <a href="" class="togglelink"><li class="other-vehicles">Vehicles</li></a>
   <a href="" class="togglelink"><li class="house">House</li></a>
   <a href="" class="togglelink"><li class="boat">Boats</li></a>  
   <a href="" class="togglelink"><li class="truck">Trucks</li></a>
   <a href="" class="togglelink"><li class="fragile">Fragile</li></a>
   <a href="" class="togglelink"><li class="animals">Animals</li></a>  
   <a href="" class="togglelink"><li class="others">Others</li></a>
</ul>

And the supposed hidden DIV content is:

<!-- start of furniture -->
     <div class="row">
         <div class="panel panel-default panel-custom toggle" style="display: block;">
             <div class="panel-body"> 
                <p>Furniture content</p>
             </div>
         </div>
      </div>
<!-- end of furniture -->

And the JS that I'm using is:

$(document).ready(function() {   
    $('.toggle').hide();
    $('a.togglelink').click(function() {
        $('.toggle').hide();
        $(this).parent().next('.toggle').toggle('slow');
        return false;
    });
});

http://jsfiddle.net/FRde7/

Only the problem is that all the content DIVs are shown, none are hidden as suppose to be.

Any ideas why this is not working ?

Thank you!

Answer 1

Your logic is flawed. You'll probably want to reference each instance of .toggle by the index of the .togglelink that's been clicked:

http://jsfiddle.net/isherwood/FRde7/4

$('.toggle').hide();

$('a.togglelink').click(function() {
    var myIndex = $(this).index();
    $('.toggle').hide();

    $('.toggle').eq(myIndex).toggle('slow');
    return false;
});