jQuery Forum

I have a table that contains lists. The lists load as collapsed. For most of the lists I've been using "display" to toggle between hide() and show() and it works. However, I have one list that's so long it it has a large impact on the height of the table row when it's expanded. For that one I want to use "visibility" so the table row's height changes less and visually easier on the user.

(I tried finding the tags to change below to a code format but I couldn't. I'll edit this as soon as someone let's me know what it is.)


Here's what's in CSS:
ul.TOCdisplay{display: none;}
ul.TOChidden{visibility:hidden;}


Here's what's in JQuery:
    $('li').click(function() {
        if ($(this).children('ul').css("visibility","hidden")){
            $(this).children('ul').css("visibility","visible");
        }
        else if ($(this).children('ul').css("visibility","visible")){
            $(this).children('ul').css("visibility","hidden");
        }
       
        $(this).children('ul').toggle();
    });



The toggle works fine for display and after clicking the list that's hidden a few times it acts like it's being controlled by "display" and not "visibility" where the row's height changes as I click that associated "li". I'm pretty new to JQuery so any help would be appreciated. Thanks!