спойлер на css 2

by strange_atom

HTML

<div class="open" role="tab" tabindex="1">
    <div role="tabpanel" class="desc">
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <span role="button" tabindex="0" class="close">close</span>
</div>

<div class="open" role="tab" tabindex="1">
    <div role="tabpanel" class="desc">
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <span role="button" tabindex="0" class="close">close</span>
</div>

CSS

body {
    background: #CCC;
}
.desc {
    background: #333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
}
.desc p {
    cursor: text;
    color: #FFF;
}
.close {    
    display: none;
    width: 100%;
    height: 22px;
    background: #FF6;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000;
    position: absolute;
    top: 0px;
    left: 0;
}
.close:hover {   
    background: #f5ff27;
}
.open:before {
    content: 'open';
    border-bottom: 1px dotted #000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FF6;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}
.open:hover:before {
    background: #f5ff27;
}
.open {
    margin: 5px 0 0 15px;
    height: 23px;  
    width: 240px;
    outline: none;
    float: left;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
}
.open:focus {
    height: 122px;
}
.open:focus .close {
    display: block;
}
.open:focus:before {
    display: none;
}