jquery mobile tap event

$(function() {
    $('.quickNav').live('tap',function(event) {
        if ($(".select_body").is(":hidden")) 
        {
                $(".select_body").show(); 
        } 
        else 
        {
            $(".select_body").hide(); 
        }        
    });
});

This works fine except for once it is visible and you tap again it doesn't go away.

Thoughts?

$('.quickNav').live('tap',function(event) {
    $(".select_body").toggle(); //  toggles the visibility/display of the element.
});

this does the same as the lengthy if/else script

See toggle method documentation in the jQuery API docs.

Once the element is hidden, its height and width are zero. This means when you tap the same place, you don't actually hit the element a second time.

I would recommend setting its opacity to zero instead. Here's kind of what you could do:

$(function() {
    $('.quickNav').live('tap',function(event) {
        if ($(".select_body").is(":hidden"))
        {
            $(".select_body").css("opacity", 1);
        } 
        else 
        {
            $(".select_body").css("opacity", 0);
        }        
    });
});

and a shorter version of the same behaviour:

$(function() {
    $('.quickNav').live('tap',function(event) {
        $(".select_body").css("opacity", 1 - parseInt($(".select_body").css("opacity")));
    });
});

I havent actually tested this code, so I don't even know if it will run!

note: fadeOut() will use hide() at the end of its animation, so it doesn't really help here.