Question

$(function() {
    $("table.section thead").click(function() {
      if ($(this).next("table.section tbody").style.display == "block"){
         $(this).next("table.section tbody").slideUp("slow");
      }
      if ($(this).next("table.section tbody").style.display == "none"){
         $(this).next("table.section tbody").slideDown("slow");
      }
    });
});

I dont know how to achieve this, any help would be very much appreciated.

UPDATE:

I was trying to use the following function.

$(function() {
    $("table.section thead").click(function() {
    $(this).next("table.section tbody").slideToggle("slow");

    });
});

Which it giving me a problem, (when thead it collapse and you click on it, it expands and then collapse again, so it would always be collapse). That is why I am trying to get the function at the top.

Answer 1

Use the visible selector in this case:

$(function() {
    $("table.section thead").click(function() {
      var body = $(this).next("table.section tbody");
      if (body.is(":visible"))
         body.slideUp("slow");
      else
         body.slideDown("slow");
    });
});

But probably much simpler just use .slideToggle() like this:

$(function() {
    $("table.section thead").click(function() {
      $(this).next("table.section tbody").slideToggle("slow");
    });
});