<div class="b" id="b1"> Спойлер</div>
<div class="bl" id="bl1">Преждевременно раскрытая важная информация, которая портит впечатление от художественного произведения, разрушая интригу.</div>
<div class="b" id="b1"> Блочная модель</div>
<div class="bl" id="bl1">Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга.</div>
.bl {
display: none; margin: 5px; font-size: 14px; text-align: left; font-weight: 333; font-family: verdana; color: #555; padding: 5px;
} .b {
background: #f5f5f5; color: #777; border-radius: 2px; padding: 3px; border: none; font-family: sans-serif; font-size: 14px; margin: 1px auto; display: block; text-align: center; width: 200px;
}
$(function() {
$("#b1").click( function() {
$("#bl1").slideToggle(500);
//500 - скорость анимации
});
$("#b2").click( function() {
$("#bl2").slideToggle(500);
//id не должны совпадать с другими спойлерами
});
});