خاصية slideToggle بالـ Jquery

ما هي خاصية slideToggle ؟

هذه الخاصية تنقسم لكودين في الأصل، وهما:
slideDown : وهي اظهار عنصر مخفي من الأعلى إلى الأسفل.
slideUp : هي اخفاء عنصر ظاهر من الأسفل إلى الأعلى.
slideToggle : تعمل عمل الأمرين السابقين تلقائيا، يقوم بفحص العنصر، اذا كان العنصر مخفي، عند الضغط يقوم بإظهاره، والعكس في كل مرة تضغط فيها على الزر.

الدرس بسيط وسهل، وسأقوم بالشرح على كود صغير أيضا ...

صورة العمل:

نتيجة العمل النهائي:
عند الضغط على زر تويتر يقوم بإخفاء واظهار المحتوى الموجود داخل div الـ class الخاص به tweets .
الكود سهل وبسيط:

عند الضغط على زر .twitter قم بإخفاء أواظهار الـ div الذي اسمه .tweets

كود 1

$('.twitter').click(function(){
        هنا سيكون الكود الخاص بإظهار أو إخفاء محتوى تويتر.
    })

  في الكود السابق أعطيناه أمر الضغط على الزر.

كود 2

$('.tweets').slideToggle(200);

  في الكود السابق قلنا له قم بالبحث عن الـ div الذي اسمه tweets وقم بتنفيذ الأمر slideToggle ( الذي قمنا بشرح وظيفته بالأعلى ).

 كود 3 (الكود النهائي)

$('.twitter').click(function(){
        $('.tweets').slideToggle(200);
    });

  ملاحظة: الكود المشروح بالدرس هو عبارة عن اظهار العنصر في الحالة الافتراضية، في حال أردنا أن يكون العنصر div في البداية مخفي وعند الضغط اظهاره نقوم بكتابة الكود التالي في الـ css

.tweets{display: none;}

منشورة في: شروحات متنوعة