toggle() hide/show with different element

Question

I got a list table, so when I click one of list table on it, another list show. and i click back, list will be hide. here is the code for the hide and show.

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

});

but, when i click back. can't hide. Please correct me. Thanks

Check my example

Answer 1

DEMO

If the .main clicked has a parent with class .data , then it means click was on a new shown row. So we find the parent div and close it. Else we will find and hide/show the immediate next row.

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