jQuery Toggle functions not executing

I have created a fiddle here: http://jsfiddle.net/brombomb/kYsN7/

Since slideToggle doesn't work with Table's (due to display: block/table-row issues) I have tried to roll my own with some code I've found on the internet. As you can see I've included some console.log() for debugging purposes but they never g开发者_JS百科et fired. I originally had these as separate defined functions but that wasn't working so I rolled them up into the toggle function calls.

Original slide table code: http://www.tino.nl/index.php/2009/08/05/table-animations-in-jquery/

The code does work, I think you may just be misunderstanding what you've done. The toggle function attaches a click handler to the item it is called on, when clicked it alternates the 2 methods called. So when you click on your heading this handler is attached to the body. Then clicking on the tbody will cause the slide up (try it, this works).

I think really you intended to attach the handler to the head. I'm assuming you intend the click on the head to do the hide. Something more like this:

http://jsfiddle.net/kYsN7/13/

the show isn't working right but I think the structure is more along the lines of what you intended.

Just do this:

   $('#horseStable table thead').click(function() {
      $('#horseStableBody').slideToggle();
   });

And that's it. I tested it in your jsfiddle and it works OK. Hope this helps. Cheers

Is you really wanting slide effect to your td elements?

Without animation, you can simple do it:

$('#horseStable table thead').click(function() {
    if ($("#horseStableBody td").is(":visible")) {
        $("#horseStableBody td").hide();
    } else {
        $("#horseStableBody td").show();
    }

    return false;
});