Два вида спойлеров - открывается при нажатии на заголовок и закрывается при нажатии. (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 -<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>
.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;
}
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;
}
Что в результате -
*