Question

http://jsfiddle.net/nhmbA/

In above link you’ll find my working code.
The issue is when you first click on Select For button, it’ll show a list but again you click on the same button then the list should not be visible but its vice-versa.

I know, this is due to blur event applied to the list but I also want the list to be hidden when its clicked outside.

Help me to sort this minor issue..

Answer 1

In your code change

$('.tglrOptns').blur(function(){
    $(this).css('display', 'none').siblings('.optnTglr:first').removeClass('seltd');
});

to

$('body').click(function(e){

    $('.tglrOptns').css('display', 'none')
     .siblings('.optnTglr:first').removeClass('seltd');

});

and add this

$('.tglrOptns').click(function(e){
e.stopPropagation();
});

Demo