If the visibility is set to hidden then toggle won't do anything except make it take up space or not, look at this fiddle to see what I mean.
http://jsfiddle.net/zev6t/ The first button always has a visibility of hidden, when its display is none (after every other toggle) then it also takes up no space, otherwise it still takes up space but you will never be able to see it since the visibility is always hidden.
To do what you want to do reliably I'd use classes and assign a special class to the one that should be done using visibility. Something along these lines:
- $('li').click(function() {
- if ($(this).children('ul').hasClass("useVisibility")) {
- 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");
- }
- } else {
- $(this).children('ul').toggle();
- }
- });
You didn't post any markup though so this could be way off and it does assume there is only one ul in each li that could be clicked (both the css and hasClass methods only return the value for first element in the set). If there are more than one then you'll need to loop through them all and test each one individually for that special class.
Dave