javascript - jquery onclick function not doing what it should -

i have following jquery, on clicking #block4, .maincontent shows. works fine @ first, show , hide div. once clcik again after initial first 2 times, .maincontent div shows , disappears straight away.

$('#block4').click(function(){    $(".maincontent").delay(500).fadein();    $("#block4").click(hideit) });  function hideit() {    $(".maincontent").fadeout(); }; 

anyone know problem is?

you shouldn't this. better set class or flag might need :

$('#block4').click(function(){  var $cont=$(".maincontent");     if(!$cont.hasclass('visible'))         $cont.addclass('visible').delay(500).fadein();     else         $cont.removeclass('visible').fadeout(); }); 

as solution try disabling previous event :

$("#block4").off('click').click(hideit); 

or better use .one although prefer class solution :

$('#block4').one('click',function(){    $(".maincontent").delay(500).fadein();    $("#block4").one('click',hideit); });