1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>展开收起</title>
6 <style type="text/css">
7 body{
8 margin: 0 auto;
9 padding: 0px;
10 }
11 #pn{
12 background: #e8e8e8;
13 width: 600px;
14 height: auto;
15 margin: 0 auto;
16 padding: 5px;
17 font-size: 9pt;
18 }
19 .slide{
20 margin: 0;
21 padding: 0;
22 width: 600px;
23 border-top: solid 4px gray;
24 margin: 0 auto;
25 }
26 .btn-slide{
27 background: gray;
28 text-decoration: none;
29 text-align: center;
30 width: 120px;
31 height: 30px;
32 padding: 10px 0 0 0;
33 display: block;
34 color: #FFF;
35 margin: 0 auto;
36 }
37 </style>
38 <script type="text/javascript">
39 function showdiv() {//展开函数
40 document.getElementById('hpn').style.display="block";
41 document.getElementById('strHref').innerHTML="收起";
42 document.getElementById('strHref').href="javascript:hidediv()";
43 }
44 function hidediv() {//收起函数
45 document.getElementById('hpn').style.display="none";
46 document.getElementById('strHref').innerHTML="展开";
47 document.getElementById('strHref').href="javascript:showdiv()";
48 }
49 </script>
50 </head>
51 <body>
52 <div id="pn">
53 <p>
54 手机 - 商品筛选</p>
55 <p>
56 网络：移动4G 联通3G 电信3G</p>
57 <div id="hpn" style="display: none">
58 <p>
59 价格：5000元以上 4000-4999 3000元以下</p>
60 <p>
61 特点：0元购机 防水 长待机</p>
62 </div>
63 </div>
64 <p class="slide">
65 <a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a> <!--点击按钮-->
66 </p>
67 </body>
68 </html>
