JavaScript
- 3 ответа
- 0 вопросов
1
Вклад в тег
<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();
}
});
});