إخفاء المحتوى وعرضه باستخدام CSS: خدعة بدون JavaScript

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

إخفاء/إظهار تبديل المحتوى:

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

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

التحدي:

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

الحل:

لمعالجة هذه المشكلة، ما يلي يمكن استخدام كود CSS وHTML المنقح:

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

بعض المعلومات المثيرة للقلق هنا

Hide Me
Show Me
Some alarming information here