收缩DIV展开DIV的代码 如何实现2个呢

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/tab.js" type="text/javascript"></script>
<style>
* {
margin:0;
padding:0;
}
body {
text-align:center;
font:75% Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font:125% Arial, Helvetica, sans-serif;
text-align:left;
font-weight:bolder;
background:#333;
padding:3px;
display:block;
color:#99CC00
}
.class1 {
width:40%;
background:#CCC;
position:relative;
margin:0 auto;
padding:5px;
}
span {
position:absolute;
right:10px;
top:8px;
cursor:pointer;
color:yellow;
}
p {
text-align:left;
line-height:20px;
background:#333;
padding:3px;
margin-top:5px;
color:#99CC00
}
.class1content {
height:300px;
overflow:hidden
}
</style>
<script>function opendiv(name1){
var d=name1;
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=10; //设置层展开的速度
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function closediv(name1){
var d=name1;
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=10;//设置层收缩的速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function usediv(name1,name2){
var d=name1;
var sb=name2;
if(d.style.display=='none'){
opendiv(name1);
sb.innerHTML='展开';
}else{
closediv(name1);
sb.innerHTML='收缩';
}
}
</script>
</head>
<body>
<div class="class1">
  <h1>Alone展开隐藏效果</h1>
  <span id="stateBut" onClick="usediv(class1content,stateBut)">展开</span>
  <p id="class1content" class="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
</div>
<div class="class1">
  <h1>Alone展开隐藏效果</h1>
  <span id="stateBut1" onClick="usediv(class1content1,stateBut1)">展开</span>
  <p id="class1content1" class="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
</div>
</body>
</html>

解决方案 »

  1.   

    小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
      妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
      小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
      妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
      小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
      妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
      小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
      蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。
      

  2.   

    推荐使用jquery的UI插件脚本，很容易！<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.4.3.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.accordion.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
    $(function() {
    $( "#accordion" ).accordion();
    });
    </script>
    </head>
    <body><div class="demo"><div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
    </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
    </div>
    </div></div><!-- End demo --><div class="demo-description">
    <p>
    Click headers to expand/collapse content that is broken into logical sections, much like tabs.
    Optionally, toggle sections open/closed on mouseover.
    </p>
    <p>
    The underlying HTML up is a series of headers (H3 tags) and content divs so the content is
    usable without JavaScript.
    </p>
    </div><!-- End demo-description --></body>
    </html>
      

  3.   

    <script src="js/tab.js" type="text/javascript"></script>
    <style>
    * {
    margin:0;
    padding:0;
    }
    body {
    text-align:center;
    font:75% Verdana, Arial, Helvetica, sans-serif;
    }
    h1 {
    font:125% Arial, Helvetica, sans-serif;
    text-align:left;
    font-weight:bolder;
    background:#333;
    padding:3px;
    display:block;
    color:#99CC00
    }
    .class1 {
    width:40%;
    background:#CCC;
    position:relative;
    margin:0 auto;
    padding:5px;
    }
    span {
    position:absolute;
    right:10px;
    top:8px;
    cursor:pointer;
    color:yellow;
    }
    p {
    text-align:left;
    line-height:20px;
    background:#333;
    padding:3px;
    margin-top:5px;
    color:#99CC00
    }
    .class1content {
    height:300px;
    overflow:hidden
    }
    </style>
    <script>function opendiv(name1){
    var d=name1;
    var h=d.offsetHeight;
    var maxh=300;
    function dmove(){
    h+=10; //设置层展开的速度
    if(h>=maxh){
    d.style.height='300px';
    clearInterval(iIntervalId);
    }else{
    d.style.display='block';
    d.style.height=h+'px';
    }
    }
    iIntervalId=setInterval(dmove,2);
    }
    function closediv(name1){
    var d=name1;
    var h=d.offsetHeight;
    var maxh=300;
    function dmove(){
    h-=10;//设置层收缩的速度
    if(h<=0){
    d.style.display='none';
    clearInterval(iIntervalId);
    }else{
    d.style.height=h+'px';
    }
    }
    iIntervalId=setInterval(dmove,2);
    }
    function usediv(name1,name2){
    var d=name1;
    var sb=name2;
    if(d.style.display=='none'){
    opendiv(name1);
    sb.innerHTML='展开';
    }else{
    closediv(name1);
    sb.innerHTML='收缩';
    }
    }
    </script>这些代码在火狐上有兼容问题啊   收缩展开不管用啊   怎么解决啊