السلام عليكم رحمة الله وبركاته ...
قد نود في بعض الأحيان أن نظهر أو نخفي HTML Table أو DIV أو ما شابهه.
قد نود بعمل ذلك دون إعادة تحميل الصفحة مرة أخرى، و هنا من الأفضل استخدام الـ Javascript.
في البداية ضع كود الجافاسكربت هذا في الصفحة:
<script type="text/javascript">
function toggle(id)
{
var tr = document.getElementById(id);
if (tr==null)
{
return;
}
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
function changeimage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand)
img.src = sPlus;
else
img.src = sMinus;
}
}
</script>
بعد ذلك نضيف هذا الـ SPAN:
<span onclick="javascript:toggle('test');changeimage('toggleimg', 'images/minus.gif', 'images/plus.gif');">
<img src="images/minus.gif" id="toggleimg"/>
Expand...
</span>
الأن نضيف هذا الجدول و تذكر أن تضيف له الـ ID و في مثالنا هذا سوف نستخدم الاسم test لكي يربط في الـ SPAN في الأعلى كما في المثال:
<table id="test" border="1">
<tr>
<td>
Col1</td>
<td>
Col2</td>
<td>
Col3</td>
</tr>
<tr>
<td>
Data</td>
<td>
Data</td>
<td>
Data</td>
</tr>
<tr>
<td>
Data</td>
<td>
Data</td>
<td>
Data</td>
</tr>
</table>
تذكر أن نعمل مجلد اسمه images و تضع فيه هذه الصورتين: 
و للحصول على كامل المثال على شكل HTML تفضل من هنا: collapse table.zip (3.78 kb)
مع تحياتي ... طلال الحضبي.