页面实现折叠效果

在一些系统中，我们经常看到页面的折叠，打开效果。 其实原理是一样的，图片添加点击事件，

<table>

      <tr class=common>
        <td class=common>
          <IMG  src= "../common/images/butExpand.gif" style= "cursor:hand;"  
                OnClick= "showPage(this,div1);">
         </td> 
          <td class=titleImg>
            基本信息
          </td>   
      </tr> 
    </table>
   <Div  id= "div1" style= "display: ''">
          折叠区代码 
   </div>

 其中style= "cursor:hand;"    这个是鼠标事件，就是鼠标经过时，指针的变化，这里是变成小手，其他的属性参考w3cschool 中的介绍。 

function showPage(img,spanID)
{
	if(spanID.style.display=="")
	{
		//关闭
		spanID.style.display="none";
		img.src="../common/images/butCollapse.gif";
	}
	else
	{
		//打开
		spanID.style.display="";
		img.src="../common/images/butExpand.gif";
	}
}

 

附件是一个完整的示例。