<p class='spoiler_block'>[[+introtext]]</p>
<p class='spoiler_title'>развернуть</p>
.spoiler_title{
font-size: 12px;
border-bottom: #000000 dashed 1px;
cursor: pointer;
color: #62a000;
display:inline-block;
}
.spoiler_block{
height: 25px;
overflow:hidden;
}
.spoiler_block2 {
height: auto !important;
}
$(document).ready(function(){
$('.spoiler_title').click(function(){ // при клике по заголовку спойлера
var show = $(this).attr('show'); // проверяем атрибут, в котором записано - отображен спойлер или скрыт
if(show == 1){ // если отображен, то прячем
$(this).attr('show', 0);
$('.spoiler_block').slideUp(300);
}else{ // если спрятан, то показываем
$(this).attr('show', 1);
$('.spoiler_block').slideDown(300);
}
});
});
<p class='spoiler_block'>qqqqqq<br>wwwwww<br>eeeeee<br>qqqqq<br>wwwww<br>eeeee<br>qqqqqq<br>wwwwww<br>eeeeee<br>qqqqq<br>wwwwww</p>
.spoiler_title{
font-size: 12px;
border-bottom: #000000 dashed 1px;
cursor: pointer;
color: #62a000;
display:inline-block;
}
.spoiler_block{
overflow:hidden;
}
$(function() {
$('.spoiler_block').each(function() {
var t = $(this);
var h1 = t.height();
var h2 = 40; // необходимая высота блока
if (h1 > h2) {
var n;
var add_spoiler_expand_title = function() {
t.after('<p class="spoiler_title">развернуть</p>');
n = t.next();
n.on('click', spoiler_expand);
};
var add_spoiler_collapse_title = function() {
t.after('<p class="spoiler_title">свернуть</p>');
n = t.next();
n.on('click', spoiler_collapse);
};
var spoiler_collapse = function() {
n.fadeOut(100, function() {
n.remove();
t.css({height: h2 + 'px'});
add_spoiler_expand_title();
});
};
var spoiler_expand = function() {
n.remove();
t.stop(true, false).animate({height: h1 + 'px'}, 300, add_spoiler_collapse_title);
};
t.css({height: h2 + 'px'});
add_spoiler_expand_title();
}
});
});