Toggle State Incorrect in jQuery

Question

I am using jQuery to show / hide lists, but it takes two clicks on a link instead of just one to show the list. Any help?

jQuery.showList = function(object) {
    object.toggle(function(){
            object.html("▾");
            object.siblings("ul.utlist").show("fast");
        }, function(){
            object.html("▸");
            object.siblings("ul.utlist").hide("fast");
        }); 
}

$(document).ready(function() {

    $("#page").click(function (e){
     e.preventDefault();
     var target = $(e.target);
     var class = target.attr("class");
     if(class == "list")
      $.showList(target);  
    });
});

Answer 1

Not sure if this will fix everything but stop using reserved keywords. Change variable class to something like c. And Change object variable to at least obj.

Answer 2

Doing the following worked well

jQuery.showList = function(obj) {
    var list = obj.siblings("ul.utlist");
    if(list.is(":visible")){
        obj.html("▸");
        list.hide("fast");
    } else {
        obj.html("▾");
        list.show("fast");
    }
}

Answer 3

It's probably because toggle thinks the object is already visible, and executes the 'hide' clause.

edit: Eh.. quite circular logic; how else would a user be able to click on it :-)

PS. You changed the logic from is-object-visible? to is-list-visible? in your own reply.