I really thought that would solve it, looked so promising. I used the slideUp and slideDown effects instead since they looked a lot better, though it does now wait for the first effect to complete. If anything it starts the slideDown earlier when I use the method you wrote, and after it's done it does slideUp and slideDown again for the table. I think that it might be the structure that I'm using or something.
<table id="index" class="tbl"> <tr> <td>FIRST TABLE!</td> </tr> </table> <table id="next" class="tbl"> <tr> <td>SECOND TABLE!</td> </tr> </table> The tbl class has display: none; as style so nothing shows from the start. In $(document).ready I show('slow') the index and that works great. Then when I press a button to call the toggleShow('next') it does some strange slideUp effect of the next table over the index and then hides the next to just show it again, very strange behavior... Is there any place I can see an example of this being used and not making strange effects on every toggle. I know that my post really doesn't make much sense since I can't explain the very strange effect that occurs on the: function toggleShow(id) { $('.tbl').slideUp( 'slow', function() { $('#' + id).slideDown('slow'); }); }