Спойлер css

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;
}

JavaScript

/*******************************************************/
/*              А еще я знаю JS                        */
/*              [email protected]                  */