خاصية slideToggle بالـ Jquery









هذه الخاصية تنقسم لكودين في الأصل، وهما:
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;}
لمعاينة الدرس مباشرة >> Slide Toggle Jquery - TRAIDNT

محمد الحلبي : http://www.traidnt.net/vb/traidnt2190168