Отображать текст в блоке частично. Показывать полностью по нажатию кнопки.

Главные вкладки

Аватар пользователя сельский библиотекарь сельский библио... 2 февраля 2015 в 12:37

На одной странице несколько объемных текстов (basic page).
Хотелось бы отображать только анонс от них, а полное содержимое по нажатию на кнопку Показать целиком/Свернуть.

Чтоб было понятнее, вот пример http://www.pushe.ru/
При нажатии на кнопку Два слова о фабрике PUSHE открывается див, кнопка меняется на Закрыть.

Только в моем случае, первоначально должна быть видна часть дива, а по кнопке уже полностью.

Как это лучше сделать?

Комментарии

Аватар пользователя Никки Никки 2 февраля 2015 в 13:07

сельский библиотекарь wrote:
На одной странице несколько объемных текстов (basic page).

Это страница раздела, на которой вы вместо анонсов вывели тексты целиком?

Аватар пользователя сельский библиотекарь сельский библио... 2 февраля 2015 в 14:55

Никк wrote:
Это страница раздела, на которой вы вместо анонсов вывели тексты целиком?

Да, физически не должно быть разделения на единицы содержимого, весь текст являются единой страницей, но пользователь кнопкой должен иметь возможность разворачивать и сворачивать нужный текст (div), опираясь на видимый ему изначально фрагмент (div с "анонсом" -вступлением). Текст статичный, содержимое всех блоков должно загрузиться в HTML код страницы.

Вот здесь: _http://www.wildberries.ru/%D0%94%D0%BB%D1%8F_%D0%BC%D1%83%D0%B6%D1%87%D0...
внизу страницы есть похожий блок, разница толкьо в том, что у меня их несколько и эффекты никакие не нужны.

Что-то подсказывает у этого вопроса должно быть просто решение. )

Аватар пользователя Никки Никки 2 февраля 2015 в 16:23

Типа такого что ли?

<div>текст, который виден изначально
<span style="text-decoration:underline;cursor:pointer" onclick="$('#all_text').toggle();">подробнее</span> </div>

<div id="all_text" style="display:none" >остальной текст </div>

Аватар пользователя сельский библиотекарь сельский библио... 2 февраля 2015 в 21:57

bumble wrote:
Сорри, не width, а height.

Как раз, именно height.
Нажали кнопку - div увеличился по вертикали, все что ниже на странице поехало вниз, нажали снова - обратный результат.

Аватар пользователя bumble bumble 3 февраля 2015 в 15:31

"Никк" wrote:
Принципиальной разницы не вижу. Суть в том, что текста сначала не видно, а потом он виден.

Изначально должно быть видно часть текста. По клику весь.