Css:
A, label {
Display:block;
border-bottom:1px solid #ccc;
Padding:1em 2em;
width:100%;
Color: #000;
Text-decoration:none;
Cursor:pointer;
}
. all-items {
Display:none;
}
. show-all {
Display:none;
}
. list {
position:relative;
Padding-bottom:3.188em;
}
Label {
Position:absolute;
bottom:0;
}
. show-all:checked ~. All-items {
Display:block;
}
. show-all:checked + Label:before {
Content: "Less";
}
Html:
<div class= "List" >
<a href= "#" >Micket</a>
<a href= "#" >mace windu</a>
<a href= "#" >count dooku</a>
<a href= "#" >admiral ackbar</a>
<a href= "#" >padme amidala</a>
<input id= "Show-all" class= "Show-all" type= "checkbox"/>
<label for= "Show-all" ></label>
<div class= "All-items" >
<a href= "#" >gamorrean guards</a>
<a href= "#" >C-3P0</a>
<a href= "#" >qui-gin jinn</a>
<a href= "#" >imperial guards</a>
<a href= "#" >obi-wan kenobi</a>
<a href= "#" >tie Fighter pilot</a>
<a href= "#" >Greedo</a>
</div>
</div>
Incompatible with IE6, 7, 8
Transferred from: http://modernweb.com/2014/07/30/5-things-wont-believe-built-css/