متد toggle

متد toggle()

متد toggle() هوشمندترین متد نمایش است: اگر عنصر نمایان باشد مخفی‌اش می‌کند و اگر مخفی باشد نمایشش می‌دهد. دیگر نیازی به دو دکمه جدا برای hide و show نیست!

$(selector).toggle(speed, callback);

// یک دکمه برای باز و بسته کردن
$("#menuBtn").click(function() {
    $("#menu").toggle("slow");
});

خانواده متدهای toggle

toggle در animate

داخل متد animate() هم می‌توانید از مقدار "toggle" استفاده کنید:

// باز و بسته شدن ارتفاع عنصر
$("button").click(function() {
    $("div").animate({ height: "toggle" });
});

toggleClass: بهترین دوست toggle

متد toggleClass() اگر کلاس وجود نداشته باشد اضافه‌اش می‌کند و اگر داشته باشد حذفش می‌کند — عالی برای حالت‌های روشن/خاموش:

// روشن و خاموش کردن حالت شب
$("#darkModeBtn").click(function() {
    $("body").toggleClass("dark-theme");
});

// علامت‌گذاری آیتم‌های لیست کارها
$("li").click(function() {
    $(this).toggleClass("completed");
});

مثال کاربردی: دکمه «نمایش بیشتر»

$("#moreBtn").click(function() {
    $("#extraContent").slideToggle(400, function() {
        var isShown = $(this).is(":visible");
        $("#moreBtn").text(isShown ? "نمایش کمتر ▲" : "نمایش بیشتر ▼");
    });
});

جمع‌بندی

• toggle() وضعیت نمایش عنصر را برعکس می‌کند
• سه نوع toggle دارید: ساده، کشویی (slideToggle) و محو (fadeToggle)
• toggleClass() وضعیت کلاس CSS را برعکس می‌کند — انتخاب عالی برای حالت‌های روشن/خاموش