JavaScript · الدرس ٣ من ٤

أظهر نبذتك بضغطة

تحدّد hidden إن كان العنصر مخفياً. تعكس ! القيمة: يظهر العنصر المخفي، ويختفي العنصر الظاهر عند الضغطة التالية.

جرّب الآن

شغّل الكود، ثم اضغط الزر مرتين. لاحظ ظهور النبذة واختفاءها.

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها قبل تشغيل الكود؛ سيُضاف اسم ملفها إلى المثال تلقائياً.

        JavaScript · script.jsdocument.getElementById("toggle")
  .addEventListener("click", () => {
    const details = document
      .getElementById("details");
    details.hidden = !details.hidden;
  });
        عدّل HTML وCSS لمشروعك
            HTML · index.html<button id="toggle">اعرض نبذتي</button>
<p id="details" hidden>أنا سارة، أتعلّم بناء المواقع.</p>
            CSS · style.cssbody { font-family: sans-serif; padding: 16px; color: #12211f; background: #fcfbf7; } h1 { font-size: 24px; } button { font: inherit; padding: 6px 12px; color: #fff; background: #0c4b3c; border: 0; border-radius: 6px; cursor: pointer; }
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

هل تستطيع شرح ما تفعله الضغطة الثانية؟ جرّب الجمع بين هذه الأفكار في مشروعك.

التالي: مشروعك: التفاعل

أحتاج مساعدة

نختار الزر toggle والفقرة details. إذا لم يظهر شيء، راجع الاسمين في كودك وقارنهما مع HTML الموجود تحت «شرح إضافي».

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك