در این بخش از آموزش JQuery ، رویداد toggle را در طراحی سایت شرح میدهیم. رویداد toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد . رویداد toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد . این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند . شکل کلی استفاده از این متد به شرح زیر است : $( selector ).toggle( speed , easing , callback ) ; selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود . speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است . انواع مقادیر ممکن عبارتند از : 1) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه . 2) Slow : سرعت آهسته 3) Fast : سرعت زیاد easing : این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است . انواع مقادیر ممکن عبارتند از : 1) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است . 2) Liner : سرعت در کل طول فرایند یکسان است . function : به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود . استفاده از این پارامتر اختیاری است . مثال زیر کاربرد رویداد toggle را نشان میدهد : $("p").toggle( function(){$("p").css({"color":"red"});}, function(){$("p").css({"color":"blue"});}, function(){$("p").css({"color":"green"}); });