Два вида спойлеров - открывается при нажатии на заголовок и закрывается при нажатии. (jsfiddle.net)

Код html - прописать правила использования из тестика-скрипт

<div class="spoiler">
    <input type="checkbox" id="sp1"/>
    <label for="sp1" class="tog"></label>
    <div class="sp-content">Здесь будет наш текст...</div>
</div>
<hr>
<div class="spoiler">
    <input type="checkbox" id="sp2" checked="checked" />
    <label for="sp2">Заголовок</label>
    <div class="sp-content">Здесь будет наш текст...</div>
</div>

Код css -

.spoiler>input{
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.spoiler>label{
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        border-radius: 3px;
        background-color: #F9F9F9;
        border: 1px solid #AAA;
        color: #282D31;
        font-weight: bold;
        display: block;
        position: relative;
        padding: 0 10px;
}
.spoiler>label:hover{
    background-color: #eee;
}
.spoiler>label.tog:before {
    content: "Открыть";
}
.spoiler>input:checked ~ label{
    border-radius: 3px 3px 0 0;
}
.spoiler>input:checked ~ label.tog:before {
    content: "Закрыть";
}
.spoiler>input:checked ~ label.tog{
     background-color: #eee;
}
.spoiler>input:checked ~ .sp-content{
    display: block;
}
.spoiler>.sp-content {
    display: none;
    border: 1px solid #AAA;
    background-color: #fff;
    padding: 5px 10px;
    margin-top: -1px;
    border-radius: 0 0 3px 3px;
}

Что в результате - 

*