Длинный текст в визуально привлекательной манере?

63
5

Как вы можете видеть на рисунке ниже, мой текст отображается в "относительно небольшом" DIV. В настоящее время пользователи имеют возможность прокручивать вниз в DIV, чтобы читать полный текст, но мне не очень нравится это решение, и я ищу что-то более визуально привлекательное. Что бы вы посоветовали в этом случае? Что-то вроде hide/show DIVs, когда пользователи нажимают "text part 2", "text part 3" и т.д. Большое спасибо enter image description here

спросил(а) 2021-01-25T17:55:03+03:00 4 месяца, 3 недели назад
1
Решение
63

Используйте виджет jqueryui accordion http://api.jqueryui.com/accordion/. В Bootstrap также есть один
http://twitter.github.io/bootstrap/javascript.html#collapse

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>

Это код для бутстрапового аккордеона, я думаю, что он выглядит лучше, чем jqueryui, вам нужно загрузить бутстрап, чтобы сделать эту работу

ответил(а) 2021-01-25T17:55:03+03:00 4 месяца, 3 недели назад
63

Сделайте текстовую область более похожей на книгу, перелистывающую страницу - как интерфейс считывания текста.

Ознакомьтесь с этими примерами jquery: Примеры/Идеи

Ознакомьтесь с этим примером HTML5: Примеры/Идеи

ответил(а) 2021-01-25T17:55:03+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема