السلام عليكم ورحمة الله وبركاته.
<details>
<summary> وسائل التواصل </summary>
<ul>
<li> <a href="https://twitter.com/suleiman3ahmed"> تويتر </a></li>
<li> <a href="https://api.whatsapp.com/send?phone=96897700830"> واتساب </a></li>
<li> <a href="mailto:Suleiman.ahmed@icloud.com"> البريد الالكتروني </a></li>
</ul>
</details>
المتابعون الكرام, تحية طيبة لكم وأسعد الله أوقاتكم بالخير والمسرة.
في مشاركة اليوم سأتحدث بمشيئة الله تعالى عن بعض الطرق للتحكم في إظهار وإخفاء محتوى معين داخل صفحة html
سأعرج بإذن الله على طريقتين منها وسأذكر الفرق بين كل منها.
في البداية دعوني أوضح لكم استخدامات مفهوم إخفاء المحتويات على الصفحة:
1. القوائم الجانبية المنسدلة: فهناك بعض المواقع تجد أنها تقوم بوضع زر منسدل أقصى يسار أو حتى يمين الصفحة بمجرد الضغط عليه تخرج أمامك قائمة ببعض وصلات الصفحات الهامة كالصفحة الرئيسية أو صفحة التعريف بالموقع ووسائل التواصل وهكذا.
2. في بعض الأحيان عندما تكتب نص طويل وتعرض فيه كود معين أو أي نص آخر فيمكنك استخدام مفهوم إخفاء المحتويات للقيام بذلك.
والآن سأعرض لكم طريقتين للقيام بذلك.
الطريقة الأولى: استخدام العنصر details
تستخدم هذه الطريقة غالبًا لللتمثل القوائم الجانبية المنسدلة, كما يمكن وضع أنواع مختلفة من البيانات داخل العنصر والتحكم في إظهارها وإخفائها دفعة واحدة
يمكن بسهولة إنشائها ولا حاجة إلى استخدام تعليمات java script
يتم كتابة الكود الخاص بها ووضع المحتويات المراد التحكم في إظهارها وإخفائها بهذه الطريقة
<details>
<summary> اسم الزر الذي سيضغطه المستخدم للعرض المحتوى وإخفائه </summary>
وهنا ستضع أي محتوى تشاء
</details>
يمكن بسهولة إنشائها ولا حاجة إلى استخدام تعليمات java script
يتم كتابة الكود الخاص بها ووضع المحتويات المراد التحكم في إظهارها وإخفائها بهذه الطريقة
<details>
<summary> اسم الزر الذي سيضغطه المستخدم للعرض المحتوى وإخفائه </summary>
وهنا ستضع أي محتوى تشاء
</details>
مثال
سأكتب كودًا ينشئ قائمة منسدلة باسم وسائل التواصل بمجرد الضغط عليه سيتم إظهار قائمة بوسائل التواصل معي.<details>
<summary> وسائل التواصل </summary>
<ul>
<li> <a href="https://twitter.com/suleiman3ahmed"> تويتر </a></li>
<li> <a href="https://api.whatsapp.com/send?phone=96897700830"> واتساب </a></li>
<li> <a href="mailto:Suleiman.ahmed@icloud.com"> البريد الالكتروني </a></li>
</ul>
</details>
نتيجة الكود
وسائل التواصل
الآن ستجد أن الوضع الافتراضي للقائمة هو الاخفاء, لتغيير ذلك ستضيف كلمة open بعد details قبل علامة أكبر من > وسيكون الوضع الافتراضي للمحتوى هو الإظهار
سأطبق ذلك على المثال السابق
<details open>
<summary> وسائل التواصل </summary>
<ul>
<li> <a href="https://twitter.com/suleiman3ahmed"> تويتر </a></li>
<li> <a href="https://api.whatsapp.com/send?phone=96897700830"> واتساب </a></li>
<li> <a href="mailto:Suleiman.ahmed@icloud.com"> البريد الالكتروني </a></li>
</ul>
</details>
<summary> وسائل التواصل </summary>
<ul>
<li> <a href="https://twitter.com/suleiman3ahmed"> تويتر </a></li>
<li> <a href="https://api.whatsapp.com/send?phone=96897700830"> واتساب </a></li>
<li> <a href="mailto:Suleiman.ahmed@icloud.com"> البريد الالكتروني </a></li>
</ul>
</details>
نتيجة الكود
وسائل التواصل
الطريقة الثانية: استخدام مربعات التحديد مع تعليمات java script
على سبيل المثال: عند عرض أو شرح الأكواد البرمجية؛ فإنك بطبيعة الحال ستحتاج إلى كتابتها وسط مقالك أو مشاركتك, لكن في بعض الأحيان تكون هذه الأكواد طويلة , فهنا ستستخدم هذه الطريقة لإتاحة الفرصة للمستخدم في أن يقوم بإخفاء ذلك الكود ليستكمل قراءة النص.
هذه الطريقة تتيح لك إخفاء النصوص فقط
يمكن التحكم في الوضع الافتراضي للنص
يجب استخدام تعليمات java script لربط مربع التحديد بمهمة الإظهار والإخفاء
سأتوجه إلى المثال مباشرة
<label> عرض الكود<input type="checkbox" id="togle" onclick="togle()"></label>
<p id="txt" style="display: none">
list = [1,2,3,4]
for i in list:
print(i)
</p>
<script type-text="javascript">
function togle() {
var togle = document.getElementById("togle")
var text = document.getElementById("txt")
if (togle.checked) {
text.style.display = "block"
} else {
text.style.display = "none"
}
}
</script>
نتيجة الكود
في مثالي هذا قمت بوضع كود بايثون وأخفيته بطريقة مربعات التحديد بحيث تم وضع النص المراد إخفائه بين عبارة <p id="txt" style="display: none">
و عبارة </p>
الوضع الافتراضي للكود هو الإخفاء.
إن أردنا تغيير الوضع الافتراضي ليصبح الإظهار فسنحذف style="display: none" داخل العنصر <p> وسنضيف عبارة checked داخل العنصر <input> كما هو موضح في المثال التالي
<label> عرض الكود<input type="checkbox" id="togle" onclick="togle()" checked></label>
<p id="txt">
list = [1,2,3,4]
for i in list:
print(i)
</p>
<script type-text="javascript">
function togle() {
var togle = document.getElementById("togle")
var text = document.getElementById("txt")
if (togle.checked) {
text.style.display = "block"
} else {
text.style.display = "none"
}
}
</script>
<p id="txt">
list = [1,2,3,4]
for i in list:
print(i)
</p>
<script type-text="javascript">
function togle() {
var togle = document.getElementById("togle")
var text = document.getElementById("txt")
if (togle.checked) {
text.style.display = "block"
} else {
text.style.display = "none"
}
}
</script>
نتيجة الكود
list = [1,2,3,4]
for i in list:
print(i)
for i in list:
print(i)
ختامًا: أرجو أن أكون قد وُفِّقْت في تقديم المفيد , مع أطيب التحيات
والسلام عليكم ورحمة الله وبركاته.
ليست هناك تعليقات:
إرسال تعليق
قل شيئًا