toggle() hide/show с другим элементом

Question

У меня есть таблица списков, поэтому, когда я нажимаю на одну из таблиц списка, отображается другой список. и я вернусь, список будет скрыт. вот код для скрытия и шоу.

$(document).ready(function() { 
    //Hide table rows with class 'min', but appear when clicked. 
    $(".data").hide(); 
    $(".main").click(function() { 
    $(this).parent().parent().next(".data").toggle(); 
    }); 

}); 

но, когда я щелкнув обратно. не может скрыть. Пожалуйста, исправьте меня. Благодаря

Check my example

Answer 1

DEMO

Если .main щелкнул имеет родителя с классом .data, то это означает, что щелчок был на новом показанном ряду. Итак, мы находим родительский div и закрываем его. Иначе мы найдем и скроем/покажем ближайшую следующую строку.

$(document).ready(function() { 
    //Hide table rows with class 'min', but appear when clicked. 
    $(".data").hide(); 
    $(".main").click(function() { 
     if($(this).parents('.data').length) 
      $(this).closest('.data').toggle(); 
     else 
      $(this).next(".data").toggle(); 
    }); 
});