البرمجة

تحقيق التفاعل بدون JavaScript: إظهار وإخفاء المحتوى باستخدام CSS3

27/01/2024
3 2 دقائق

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

لتحقيق هذا الهدف، يمكننا الاعتماد على خاصية :checked في CSS3، بالتعاون مع العنصرين من نوع checkbox و . دعونا نلقي نظرة على الكود التالي الذي يوفر آلية بسيطة لإظهار وإخفاء المحتوى:

html
html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Show/Hide Content with CSS3title>
  <style>
    /* تخفي المحتوى عندما لا يكون الـ checkbox محدداً */
    .hidden-content {
      display: none;
    }

    /* إظهار المحتوى عندما يكون الـ checkbox محدداً */
    #toggle:checked + .hidden-content {
      display: block;
    }
  style>
head>
<body>

  
  <input type="checkbox" id="toggle">

  
  <label for="toggle">Click to Show/Hide Contentlabel>

  
  <div class="hidden-content">
    <p>This is the hidden content that will be shown/hidden.p>
  div>

body>
html>

في هذا الكود، يتم استخدام خاصية display لتحديد ما إذا كان يجب عرض المحتوى أم لا. تم تعريف الخصائص في CSS بحيث يتم عرض المحتوى فقط عندما يكون الـ checkbox محددًا باستخدام :checked.

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

المزيد من المعلومات

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

  1. عناصر HTML:

    • استخدمنا عنصر من نوع checkbox لتكوين المفتاح الذي يحفز عملية إظهار وإخفاء المحتوى.
    • استخدمنا عنصر لإنشاء تسمية للـ checkbox وربطها به باستخدام الخاصية for وتحديد نفس قيمة id المستخدمة في الـ checkbox.

  2. الخصائص والقواعد في CSS:

    • قمنا بتحديد خصائص CSS لعنصر يحمل فئة hidden-content والذي يمثل المحتوى الذي سيتم إظهاره وإخفاؤه.
    • تم استخدام display: none; لتخفي المحتوى عند البداية.
    • تم استخدام محدد النمط :checked في CSS لتحديد العنصر الذي يتم التحكم فيه بواسطة الـ checkbox.
    • باستخدام المحدد +، يتم استهداف العنصر الفوري الذي يلي الـ checkbox عندما يكون الـ checkbox محددًا، وهنا يكون ذلك العنصر هو المحتوى الذي نريد إظهاره.

  3. تبديل الحالة:

    • عند النقر على الـ checkbox أو على الـ label المرتبط به، يتغير حاله الـ checkbox بين محدد وغير محدد.
    • عندما يكون الـ checkbox محددًا، يتم تنشيط تأثير CSS لعنصر الـ hidden-content، مما يؤدي إلى عرض المحتوى.

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

الوسوم
27/01/2024
3 2 دقائق
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى