وعليكم السلام ورحمة الله وبركاته،
يمكنك عمل ما تطلبه بـ JavaScript والطريقة هي بوضع القيمة التي تظهر بالضغط في خلية مخفية وتظهر بالضغط عليها، للتوضيح:
نفترض أنه لديك المحتوى التالي:
كود HTML:
<div>
<ul>
<li>First Section<br />
Hello World
</li>
<li>Second Section <br />
This is second section test
</li>
</ul>
</div>
وترغب باخفاء السطر الثاني من كل نقطة فيما سبق، ومن الطرق الشائعة لعمل ذلك هو وضع المحتوى بين وسم div أو span أو أي وسم آخر، ليكون كالتالي:
كود HTML:
<div>
<ul>
<li>First Section<br />
<span id="sec1" style="display: none;">Hello World</span>
</li>
<li>Second Section<br />
<span id="sec2" style="display: none;">This is second section test</span>
</li>
</ul>
</div>
لاحظ وجود id لكل محتوى وهو لتحديد أي خلية للتحكم بها عبر JavaScript لاحقًا. في حالة تجربة الشفرة السابقة ستظهر النقاط دون السطر الثاني بحكم أنه قمنا بإخفاءه باستخدام css، في الجزء التالي بالتحديد:
الآن لنقم بعمل دالة JavaScript لتكون مهمتها اظهار المحتوى المخفي، ولنفترض أن اسمها showsection ونمرر بها متغير اسم الخلية id حتى نستطيع تحديد أي خلية يتم فتحها أو اغلاقها:
كود:
<script type="text/javascript">
showsection = function(section){
if(document.getElementById(section).style.display == 'none')
document.getElementById(section).style.display = '';
else
document.getElementById(section).style.display = 'none';
}
</script>
الدالة السابقة تمرر id الخلية عبر أمر شرطي للتحقق من حالة الخلية (مخفية/ظاهرة) وبناء على النتيجة يتم عمل العكس
بقي الآن ربط الدالة بالشفرة الأساسية وفي الربط يمكن استخدام onclick والشفرة:
كود HTML:
<div>
<ul>
<li><a href="#" onClick="showsection('sec1');">First Section</a> <br />
<span id="sec1" style="display: none;">Hello World</span>
</li>
<li><a href="#" onClick="showsection('sec2');">Second Section</a> <br />
<span id="sec2" style="display: none;">This is second section test</span>
</li>
</ul>
</div>
الشفرة كاملة:
كود HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Document</title>
<script type="text/javascript">
showsection = function(section){
if(document.getElementById(section).style.display == 'none')
document.getElementById(section).style.display = '';
else
document.getElementById(section).style.display = 'none';
}
</script>
</head>
<body>
<div>
<ul>
<li><a href="#" onClick="showsection('sec1');">First Section</a> <br />
<span id="sec1" style="display: none;">Hello World</span>
</li>
<li><a href="#" onClick="showsection('sec2');">Second Section</a> <br />
<span id="sec2" style="display: none;">This is second section test</span>
</li>
</ul>
</div>
</body>
</html>
أتمنى أن أكون وفِّقت في إيصال الفكرة