一个不错的简单的显示隐藏层效果

分享一个不错的简单的显示隐藏效果,利用js实现,简单可以扩展!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head" runat="server">
<title>一个不错的显示隐藏效果 诺豆网 nuodou.com</title>
<script language="javascript" type="text/javascript">
function hide(divName){
 document.getElementById(divName).style.display = "none";
}
function show(divName){
 document.getElementById(divName).style.display = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 697px">
 <tr>
  <td style="width: 100px">
   <input id="Button2" onclick="show('WeekProblem')" type="button" value="显示"/></td></tr>
 <tr>
  <td style="width: 100px">
   <div id="WeekProblem" style="display: none; position: absolute;">
    <table width="85%" border="0" align="center" cellpadding="10" cellspacing="0">
     <tr>
      <td height="2" bgcolor="#CCCCCC" ></td></tr>
     <tr>
      <td bgcolor="#F7F7F7">
       <table width="80%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#DADBDE">
        <tr bgcolor="#F6F6F6">
         <td height="49"><div align="center">问题描述</div></td>
         <td><textarea name="textarea2" cols="55" rows="5">有问题请到诺豆网留言 https://yangjunwei.com </textarea></td></tr>
        <tr bgcolor="#F7F7F7">
         <td height="40"> </td>
         <td><input type="button"   name="BtnWeekProblem"   value="隐藏" onClick="hide('WeekProblem') "> <a href="#"></a></td></tr>
       </table></tr>
    </table>
   </div>
  </td>
 </tr>
</table>
</form>
</body>
</html>