CSSWidget/CSS-Accordion.html at master · lingcarzy/CSSWidget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
    <title>CSS-Accordion</title>
    <style>
        .accordion-head,.accordion-content{padding: 0;margin: 0;}
        .accordion-item {height: 20px;overflow: hidden;background: #ccc;-webkit-transition: all 0.5s;}
        .accordion-item:hover {height: 100px;background: #999;-webkit-transition: all 0.5s;}
    </style>
</head>
<body>
    <div class='accordion'>
        <div class='accordion-item'>
            <h3 class='accordion-head'>Section 1</h3>
            <p class='accordion-content'>Section 1 Content</p>
        </div>
        <div class='accordion-item'>
            <h3 class='accordion-head'>Section 2</h3>
            <p class='accordion-content'>Section 2 Content</p>
        </div>
        <div class='accordion-item'>
            <h3 class='accordion-head'>Section 3</h3>
            <p class='accordion-content'>Section 3 Content</p>
        </div>
    </div>
</body>
</html>