手风琴效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>手风琴</title>
 6     <script src="../base/jquery-3.1.0.js"></script>
 7     <script src="../base/slider.js"></script>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13 
14         #slider {
15             width: 100%;
16             height: 300px;
17         }
18 
19         dt {
20             width: 100%;
21             height: 100px;
22             background: cornflowerblue;
23         }
24 
25         dd {
26             width: 100%;
27             height: 100px;
28             background: darkmagenta;
29         }
30     </style>
31 </head>
32 <body>
33 <dl id="slider" class="sliderbox">
34     <dt>
35         <span class="title">title1</span>
36     </dt>
37     <dd>
38         <p class="text">con1</p>
39     </dd>
40     <dt>
41         <span class="title">title2</span>
42     </dt>
43     <dd>
44         <p class="text">con2</p>
45     </dd>
46     <dt>
47         <span class="title">title3</span>
48     </dt>
49     <dd>
50         <p class="text">con3</p>
51     </dd>
52 </dl>
53 <script>
54     var slider = new accordion.slider("slider");
55     slider.init("slider", 0, "open");
56 </script>
57 </body>
58 </html>

说明：使用silder.js插件

只能用dl dt dd标签，以为slider.js写道

1 h = a.getElementsByTagName('dt');
2 s = a.getElementsByTagName('dd');