纯css手写手风琴

---恢复内容开始---

 

　　在网页中我们经常会遇到手风琴效果，之前经常会用jQuery和JavaScript来写，但今天给大家介绍一种用纯css写的手风琴。

　　下面是html部分：

<div class="togglebox">
　　<input id="toggle1" type="radio" name="toggle" checked="checked" />   <!--checked="checked"添加默认展开样式-->
　　<label for="toggle1">Pure CSS Accordion</label>      
　　<section id="content1">
　　　　<p>
　　　　　　Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde　　　　　　　　r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
　　　　</p>
　　　　<p>
　　　　　　Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib　　　　　　　s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
　　　　</p>
　　</section>
　　<input id="toggle2" type="radio" name="toggle" />
　　<label for="toggle2">Pure CSS Accordion</label>
　　<section id="content2">
　　　　<p>
　　　　　　Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde　　　　　　　　r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
　　　　</p>
18　　　　 <p>
　　　　　　Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib　　　　　　　s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
　　　　</p>
　　</section>
　　<input id="toggle3" type="radio" name="toggle" />
　　<label for="toggle3">Pure CSS Accordion</label>
　　<section id="content3">
　　　　<p>
　　　　　　Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde　　　　　　　　r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
　　　　</p>
　　　　<p>
29　　　　　　 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib　　　　　　　s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
　　　　</p>
　　</section>
　　<input id="toggle4" type="radio" name="toggle" />
　　<label for="toggle4">Pure CSS Accordion</label>
　　<section id="content4">
35　　　　 <p>
36　　　　　　 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde　　　　　　r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
　　　　</p>
　　　　<p>
　　　　　　Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib　　　　　　　s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
　　　　</p>
　　</section>
</div>

 

　下面是css样式：

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }    
        *,*:before,
        *:after {
            box-sizing: border-box;
        }        
        html,body {
            height: 100%;
            font: 16px/1 'Open Sans', sans-serif;
            color: #555;
            background: #e5e5e5;
        }        
        body {
            padding: 50px;
        }        
        .togglebox {
            width: 400px;
            margin: 0 auto;
            background: #fff;
            transform: translateZ(0);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }        
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }        
        label {
            position: relative;
            display: block;
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            font-size: 14px;
            font-weight: 700;
            border-top: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            background: palegreen;
        }        
        label[for*='1'] {
            border: 0;
        }        
        label:after {
            content: '<';  /*在label之后 加一个下拉图标*/
            position: absolute;
            top: 0px;
            right: 20px;
            transition: .3s transform;
        }        
        section {
            height: 0;    /*未被选中之前section高度为0*/
            transition: .3s all;
            overflow: hidden;
        }        
        #toggle1:checked~label[for*='1']:after,
        #toggle2:checked~label[for*='2']:after,
        #toggle3:checked~label[for*='3']:after,
        #toggle4:checked~label[for*='4']:after {   /*单选框点击选中以后  图标旋转-90度*/
            transform: rotate(-90deg);
        }        
        #toggle1:checked~#content1,
        #toggle2:checked~#content2,
        #toggle3:checked~#content3,
        #toggle4:checked~#content4 { 
            height: 200px;            /*单选框未被选中内容高度为0，单选框选中之后内容高度为200*/     
        }        
        p {
            margin: 15px 0;
            padding: 0 20px;
            font-size: 12px;
            line-height: 1.5;
        }
    </style>

下面是效果：

这是一种很有用的手风琴，而且可以不用任何的JavaScript和jQuery！！！

---恢复内容结束---