slideToggle विधि

slideToggle विधि छिपे हुए तत्वों को कोमलता से दिखाती है और दिखाए गए तत्वों को छिपाती है।

वाक्य - विन्यास

निर्दिष्ट समय के लिए प्रदर्शन/छिपाना, डिफ़ॉल्ट रूप से 400ms:

.slideToggle(अवधि);

समय न केवल मिलीसेकंड में, बल्कि कीवर्ड slow (600ms) और fast (200ms) से भी निर्धारित किया जा सकता है, मान जितना अधिक होगा, एनीमेशन उतना ही धीमा होगा:

.slideToggle('slow' या 'fast');

यदि कोई पैरामीटर निर्दिष्ट नहीं किया जाता है - कोई एनीमेशन नहीं होगा, तत्व तत्काल दिखाए/छिपाए जाएंगे:

.slideToggle();

दूसरे पैरामीटर के रूप में ईज़िंग फ़ंक्शन भी पास किया जा सकता है, और तीसरे पैरामीटर के रूप में कॉलबैक फ़ंक्शन - एनीमेशन पूरा होने के बाद कार्य करेगा। दोनों पैरामीटर वैकल्पिक हैं:

.slideToggle(अवधि, [ईज़िंग फ़ंक्शन], [कॉलबैक फ़ंक्शन]);

विधि को विभिन्न विकल्प पास किए जा सकते हैं, जावास्क्रिप्ट ऑब्जेक्ट के रूप में, जिसमें कुंजी: मान जोड़े होते हैं:

.slideToggle(विकल्प);

ऐसा ऑब्जेक्ट निम्नलिखित पैरामीटर और फ़ंक्शन पास कर सकता है - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always। इन पैरामीटर्स का विवरण आप animate विधि के लिए देख सकते हैं। उदाहरण के लिए, अवधि और ईज़िंग फ़ंक्शन सेट करते हैं:

.slideToggle( {duration: 600, easing: easeInSine} );

उदाहरण

आइए बटन दबाने के बाद, कोमलता से छिपाएं पैरेंट div, जिसमें पैराग्राफ होते हैं, slideToggle विधि की सहायता से (इस div को हम parent विधि की सहायता से ढूंढेंगे), बटन को दोबारा दबाने के बाद, div को फिर से कोमलता से दिखाया जाएगा और इसी तरह। कीवर्ड slow पास करके, हम गति 600ms पर सेट करेंगे:

<button>toggle text</button>
<div>
	<p id='test'>text text text text text text text</p>
	<p>text text text text text text text</p>
	<p>text text text text text text text</p>
</div>

$('button').click(function() {
	$('#test').parent().slideToggle('slow');
});

यह भी देखें

slideUp विधि,
जो तत्वों को कोमलता से छिपाती है
slideDown विधि,
जो तत्वों को कोमलता से दिखाती है
height विधि,
जो तत्व की ऊंचाई प्राप्त करने और बदलने की अनुमति देती है
toggle विधि,
जो तत्वों के कोमल प्रदर्शन/छिपाने को बारी-बारी से करती है