كيفية إظهار أو إخفاء قسم عند النقر فوق العنصر

الوجبات السريعة الرئيسية

• لا يحتوي Elementor على عنصر تحكم مخصص لإظهار أو إخفاء قسم عند النقر، لذا فإن طرق العمل الثلاثة هي عنصر واجهة المستخدم Accordion، وعنصر واجهة مستخدم تبديل المحتوى، وزر يحتوي على برنامج نصي قصير.
• تقوم أداة Elementor Accordion بإخفاء أي عناصر واجهة مستخدم داخل عنصر ما حتى يتم النقر على عنوانه، كما أن الحالة الافتراضية المعينة على الكل المطوي تبقي العنصر مغلقًا عند تحميل الصفحة.
• تعمل أداة Master Addons Toggle Content كمفتاح عرض وإخفاء عندما يُترك أحد خياريها فارغًا والآخر يحمل القسم.
• يمكن للزر إظهار أو إخفاء أي حاوية Elementor تحتوي على حوالي عشرة أسطر من JavaScript في عنصر واجهة مستخدم HTML، باستخدام فئة CSS واحدة على الزر وواحدة على الحاوية.
• لا تتفاعل شروط عرض العنصر وإعدادات الإخفاء المستجيبة مع النقرات، لأنها تقرر ما يتم عرضه حسب القاعدة أو الجهاز قبل أن يفعل الزائر أي شيء.

لإظهار أو إخفاء قسم عند النقر فوق Elementor، ضع القسم داخل شيء يفتح عند النقر عليه. تقوم أداة Accordion بذلك بدون أي مكون إضافي. يمنحك تبديل المحتوى مفتاح إظهار وإخفاء. يمكن أن يكشف الزر الذي يحتوي على بضعة أسطر من البرنامج النصي عن أي حاوية على الصفحة. لا يحتوي Elementor على “show واحد عند إعداد Click”، لذا فإن أحد هذه الثلاثة هو المسار.

تم إنشاء كل طريقة أدناه واختبارها على Elementor 4.3. اختر حسب الشكل الذي يجب أن يبدو عليه المشغل: شريط عنوان أو مفتاح أو زر.

ما هي الطريقة التي تناسب صفحتك

تقوم الطرق الثلاث بإخفاء قسم حتى النقر. وهي تختلف في ما ينقر عليه الزائر ومقدار الإعداد الذي يحتاجه.

الطريقة الأولى: أداة الأكورديون

تعد أداة Accordion هي أسرع طريقة لإظهار قسم عند النقر، لأن كل عنصر عبارة عن حاوية تقبل أي عنصر واجهة مستخدم. كل ما تضعه بالداخل يظل مخفيًا حتى يتم النقر على العنوان.

1. قم بتحرير الصفحة باستخدام Elementor واسحب الأكورديون القطعة إلى حيث يجب أن يكون القسم المخفي.
2. احذف العناصر التي لا تحتاجها. لقسم مخفي واحد، احتفظ بعنصر واحد.
3. اكتب العنوان الذي سينقر عليه الزائرون، مثل إظهار تفاصيل التسليم.
4. انقر داخل العنصر وأضف المحتوى الخاص بك: نص أو صور أو نموذج أو تخطيط حاوية كامل.
5. يفتح التفاعلات ومجموعة الحالة الافتراضية إلى انهار كل شيء.

حد هذه الطريقة هو المظهر. يكون المشغل دائمًا عبارة عن شريط عنوان أعلى المحتوى مباشرة. إذا كنت بحاجة إلى زر مصمم، أو مشغل في مكان آخر بالصفحة، فاستخدم الطريقة 3. لمزيد من أنماط العناوين، القطعة الأكورديون المتقدمة هو خيار.

الطريقة الثانية: تبديل المحتوى بخيار فارغ

عادةً ما يتم تبديل تبديل المحتوى بين كتلتين. اترك كتلة واحدة فارغة وتصبح مفتاح عرض وإخفاء: لا تظهر إحدى الملصقات شيئًا، بينما تعرض الأخرى القسم الخاص بك.

تستخدم هذه الخطوات تبديل المحتوى من ماستر أدونز برو. لقد اختبرنا الخيار الفارغ في Elementor 4.3 ولم يترك أي فجوة أو عنصر نائب.

1. يجر تبديل المحتوى على الصفحة.
2. في ال عناصر قم بإدراج العنصر الأول وتسميته وإخفاء التفاصيل وحذف نموذج النص بحيث يكون محتواه فارغًا.
3. قم بتسمية العنصر الثاني أظهر التفاصيل. اكتب المحتوى في المحرر، أو قم بتعيينه يكتب إلى القالب واختيار القالب المحفوظ للتخطيط الكامل.
4. يفتح تبديل الإعدادات والمغادرة الفهرس النشط في 1، يتم تحميل الصفحة مع إخفاء القسم.
5. تعيين موضع إلى قبل إذا كان يجب وضع المفتاح فوق القسم، أو بعد وضعه أدناه.

يجعل المفتاح الحالة واضحة، مما يناسب التفاصيل الاختيارية مثل حقائق التغذية أو المواصفات الفنية أو المصطلحات. لقلبه في الاتجاه الآخر، مع ظهور القسم أولاً، قم بتعيين Active Index على 2.

التبديل بين قسمين؟ ال تبديل صفحة عناصر واجهة المستخدم للمحتوى يحتوي على مفاتيح الفوترة وجداول المواصفات وثمانية عروض توضيحية حية أخرى.

الطريقة الثالثة: زر ونص قصير

استخدم برنامجًا نصيًا عندما يجب أن يكون المشغل زرًا عاديًا، أو عندما يكون الزر والقسم في أماكن مختلفة. يمكنك إضافة فئة CSS واحدة إلى الزر، وواحدة إلى القسم، ولصق مقتطف صغير في أداة HTML.

1. أضف أ زر القطعة. في متقدم > فئات CSS، اكتب show-hide-button. اترك حقل رابط الزر فارغًا.
2. حدد الحاوية التي تريد إخفاءها. في متقدم > فئات CSS، اكتب show-hide-target.
3. اسحب إتش تي أم أل القطعة في أي مكان على الصفحة ولصق الكود أدناه.
4. قم بتحديث الصفحة واختبرها في الواجهة الأمامية.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

قاعدة النمط الأول تخفي الحاوية. والثاني يظهره بمجرد إضافة البرنامج النصي is-open فئة. والثالث يبقي الحاوية مرئية داخل محرر Elementor، لذلك لا يزال بإمكانك تحريرها. كل نقرة على الزر تضيف أو تزيل الفصل.

ثلاث ملاحظات حول هذه الطريقة. يتم فتح كل حاوية تحتوي على الفئة معًا، لذا استخدم أسماء فئات مختلفة إذا كنت بحاجة إلى أزواج منفصلة في صفحة واحدة. لا يتغير نص الزر من تلقاء نفسه. وإذا أدى البرنامج الإضافي للتخزين المؤقت أو تحسين البرنامج النصي إلى تأخير JavaScript، فيمكن تجاهل النقرة الأولى حتى يتم تحميل البرنامج النصي.

إذا كان يجب فتح القسم فوق الصفحة، فاستخدم نافذة منبثقة. يرى كيفية إضافة نافذة منبثقة في Elementor.

ما لا يعمل: عرض الظروف والإعدادات المستجيبة

تبدو ميزتا Elementor كما لو أنهما يجب أن يفعلا ذلك ولا يفعلان ذلك. كلاهما يخفي المحتوى، لكن لا يتفاعل أي منهما مع النقرة.

• إعدادات مستجيبة. متقدم > يحتوي Responsive على Hide On Desktop وHide On Tablet وHide On Mobile. يقومون بإخفاء عنصر حسب حجم الشاشة طوال الوقت.
• شروط العرض. شروط عرض العنصر إظهار عنصر أو إخفائه حسب القاعدة، مثل حالة تسجيل الدخول أو دور المستخدم أو التاريخ أو المتصفح. يتم اتخاذ القرار عند تحميل الصفحة.

إنها الأدوات المناسبة عندما يقرر الموقع ما يراه الزائر. نحن نغطيهم شروط عرض العنصرو ال تمديد شروط العرض تسرد الصفحة كل قاعدة تدعمها. عندما يقرر الزائر، استخدم إحدى طرق النقر الثلاث المذكورة أعلاه.

الأسئلة المتداولة

الأفكار النهائية

هناك ثلاث طرق يمكن الاعتماد عليها لإظهار أو إخفاء قسم عند النقر فوق Elementor. استخدم عنصر واجهة المستخدم Accordion عندما يكون شريط العنوان جيدًا، وتبديل المحتوى بخيار واحد فارغ عندما تريد مفتاحًا مرئيًا، وزرًا به برنامج نصي قصير عندما يتعين على المشغل الجلوس في مكان آخر.

إذا انتهى بك الأمر بالتبديل بين قسمين أكثر من إخفاء قسم واحد، فإن تبديل عنصر واجهة المستخدم للمحتوى بنيت لذلك.

القراءة ذات الصلة

• شروط عرض العنصر: عرض المحتوى وإخفائه حسب القاعدة
• كيفية إضافة نافذة منبثقة في Elementor
• تأثيرات التمرير العنصر
• كيفية إنشاء زر تبديل في Elementor (3 طرق)
• تبديل العنصر مقابل الأكورديون مقابل علامات التبويب مقابل محول المحتوى