Плавное раскрытие блока с контентом

Как плавно раскрыть блок с контентом. Первоначально должно отображаться несколько строк текста

HTML-разметка:

&lt;div class="item"&gt;
	&lt;div class="question"&gt;Текст вопроса&lt;/div&gt;
	&lt;div class="avtor"&gt;Имя автора&lt;/div&gt;
	&lt;div class="answer"&gt;
		&lt;div class="answer_toggler"&gt;Текст ответа&lt;/div&gt;
		&lt;div class="more_answer"&gt;&lt;span&gt;прочитать ответ&lt;/span&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

<div class="question">Текст вопроса</div>

<div class="avtor">Имя автора</div>

<div class="answer_toggler">Текст ответа</div>

<div class="more_answer"><span>прочитать ответ</span></div>

</div>

Код JQuery:

$(".faq_list_page .item .answer .more_answer").click(function() {
	var elm = $(this).prev();
	elm.scrollTop(elm.get(0).scrollHeight);
	var scrollHeight = elm.scrollTop() + elm.height();
	elm.scrollTop(0);

	$(this).prev().animate({height: scrollHeight}, 300);
});

$(".faq_list_page .item .answer .more_answer").click(function() {

var elm = $(this).prev();

elm.scrollTop(elm.get(0).scrollHeight);

var scrollHeight = elm.scrollTop() + elm.height();

elm.scrollTop(0);

$(this).prev().animate({height: scrollHeight}, 300);

});

CSS:

.faq_list_page .item .answer .answer_toggler {
	height:35px;
	overflow:hidden;
}

.faq_list_page .item .answer .answer_toggler {

height:35px;

overflow:hidden;

}

Заметки про JQuery, PHP, Битрикс, Modx и другое:)

Плавное раскрытие блока с контентом

Добавить комментарий Отменить ответ