<div class="wrapper">
<div class="harf">
<aside class="tab">
<input id="tab-one" type="checkbox" name="tabs" />
<label for="tab-one">Label One</label>
<div class="tab-content">
<p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
</div>
</aside>
<aside class="tab">
<input id="tab-two" type="checkbox" name="tabs"/>
<label for="tab-two">Label two</label>
<div class="tab-content">
<p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
</div>
</aside>
<aside class="tab">
<input id="tab-thress" type="checkbox" name="tabs" />
<label for="tab-thress">Label Three</label>
<div class="tab-content">
<p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
</div>
</aside>
</div> <!--harf end-->
<div class="harf">
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2" />
<label for="tab-four">label four</label>
<div class="tab-content">
<p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
</div>
</div>
<div class="tab blue">
<input id="tab-five" type="radio" name="tabs2" />
<label for="tab-five">label five</label>
<div class="tab-content">
<p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
</div>
</div>
</div>
</div>
css代码:
.wrapper{
width: 500px;
}
.harf{
margin-bottom: 20px;
}
.tab{
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input{
position: absolute;
opacity: 0;
z-index: -1;
}
label{
position: relative;
display: block;
padding: 0 0 0 1em;
background: #16A085;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
.blue label{
background: #2980B9;
}
.tab-content{
max-height: 0em;
overflow: hidden;
background: #1ABC9C;
-webkit-transition: max-height .35s;
transition: max-height .35s;
}
.blue .tab-content {
background: #3498db;
}
.tab-content p{
margin: 1em;
}
input:checked ~ .tab-content{
max-height: 10em;
}
label::after{
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
-webkit-transition: all .35s;
transition: all .35s;
}
input[type=checkbox] + label:after{
content: "+";
}
input[type=checkbox]:checked + label:after{
-webkit-transform:rotate(315deg) ;
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=radio]:checked + label::after{
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}