jQuery toggle not working properly

I have a list of Regions and corresponding countries..when i click on a region, the list should expand while collapsing all other regions. Also when i click on the same region again n again, it should toggle. But in my case every things working fine except that toggle function is not working properly on first click.

$(document).ready(function(){
$("tbody[id*='titl']").live('click',function(){     
    var nextId = ('#' + $(this).next("tbody[id*='tbod']").attr('id'));
    $("tbody[id*='tbod']").each(function(){
    var hideId = ('#' + $(this).attr('id'));    
    if(nextId != hideId)
    {
        $(hideId).hide();       
    }
  开发者_开发百科  else
    {           

        $(hideId).toggle();
    }

});
});

---

Although you computed nextID with the context tbody[id*='titl'] selector but after this when you call $("tbody[id*='tbod']").each(function() is searching entire DOM for a matching element.

You should write: $(this).next("tbody[id*='tbod']").each(function(){ so that you are searching nearby elements to the live tbody element