how can i trigger event when hidden div get focus in jQuery?

Question

In a tabb design If there are multiple hidden div how can i trigger event when hidden div get focus using jquery. I tried "focus" but thats for form controls. please suggest

Answer 1

You could supply a callback to the show() method, provided you are the one making that call.

$('#tab1').show('fast', function(){
    // do something now that it is showing
});

Answer 2

It is difficult to focus hidden field. But I suggest to use opacity as alternative if your existing DIVs code is editable. You can do it something like this:

HTML:

<div id="hiddendiv" style="height:'200';width:'200'">This is hidden DIV</div>

jQuery:

$('#hiddendiv').stop().animate({ opacity: 0.0 }, 500);

$('#hiddendiv').live('mouseenter', function(){
    $('#hiddendiv').stop().animate({ opacity: 1.0 }, 500);
});

Demo