Как реализовать сворачивание и разворачивание блока?

Question

[b_efimenko]

Ну я думаю по картинке понятно, что по нажатию на "показать весь отзыв" он разворачивается, а по нажатию на "свернуть" сворачивается.
Как можно сделать?
Нужно что что бы как то основной текст обрезался, что бы типа превью оставалось....

Answer 1

[IceJOKER]

Да там вариантов реализации хватает..
можно разворачиваемый кусок обернуть в div и на нажатие установить обработчик

$("div.#BLOCK_ID").toggle(); // при нажатии вызываем

либо поиграться с высотой блока , скрываем нижнюю часть установив максимальную высоту и при нажатии убираем/возвращаем свойство максимальной высоты

и т.д.....

api.jquery.com/toggle-event

Comments

[b_efimenko]

а как быть с добавление троеточия вконец и как его убирать если разворачивать блок?

[Борис Лапин]

есть CSS свойство text-overflow:ellipsis; Которое добавляет многоточие для слов, вышедших за пределы ширины элемента. Но, т.к. ширины, то таким способом можно будет сделать разворачивание блока только из одной строки (в скрытом состоянии). Тоесть в скрытом состоянии стили такие:

.text {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}

А при нажатии на кнопку, которую можно расположить прямо под этим блоком текста. Менять значение white-space . Для скрытого состояния nowrap и для открытого normal

Если вам достаточно показывать только одну строчку для скрытого состояния, то это вариант.

[b_efimenko]

Борис Лапин: как видите там 2 строки.