Как сделать раскрывающийся текст в html

Выпадающий текст HTML & CSS

Всем привет, как сделать чтобы при нажатии на текст, выпадался другой текст ниже. Как на скриншоте

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.6.15.43494

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать раскрывающийся текст в html

Раскрытие текста при нажатии на ссылку

Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.

Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.

1. < div class= «textbox» id = «mytext» >
2. Тут находится большой текст , который мы должны показать при нажатии на ссылку
3. </ div >
4. < div >
5. < a href = «#» onclick = «document.getElementById(‘mytext’).classList.add(‘opened’);
6. return false ; «>Посмотреть весь текст</a>
7. </ div >

1. < style type = «text/css» >
2. . textbox <
3. overflow : hidden ;
4. height : 100px ;
5. border : 1px dashed #A0A0A0;
6. >
7. . opened <
8. overflow : auto ;
9. height : auto ;
10. >
11. . opened + div <
12. display : none ;
13. >
14. </ style >

Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.

Способ универсальный, работает во всех браузерах. Внутри раскрывающегося блока может находиться любой контент с любыми тегами и изображениями. Количество блоков тоже ничем не ограничивается, они просто должны иметь уникальные идентификаторы. Можно немного усовершенствовать скрипт, чтобы находить нужный текстовый блок через свойства parentNode и previousSibling и отказаться от использования идентификаторов. Здесь вы можете посмотреть готовую страницу с раскрывающимися текстовыми блоками.

Раскрывающийся текст ответа на вопрос в CSS

Безусловно делается для того, чтоб пользователь не искал ответы, если ему нужно выполнить некоторые функции, здесь мы ставим таблицу, где изначально написали самые востребованные вопросы с ответами. Также можно изначально видеть, что место будет не так много занимать, ведь по умолчанию все разделы закрыты, где только наблюдаем прописанные вопросы. Если по подробнее, то видим этот тип аккордеонной секции для многих видов бизнеса, услуг, личных веб-сайтов, где подойдет данная функция под любое направление тематики.

Чтоб создать этот для кого то нужный раздел по часто задаваемых вопросов, где прописан JavaScript. То по сути вам необходимо иметь базовое представление о HTML CSS и не трогать уже настроенный JavaScript, если вы его совершенно не знаете.

Простой раздел на часто задаваемые вопросы на HTML, CSS и JS

Так выглядит наш вопросник, который многим знаком по функционалу:

Нужно подключить шрифты с скриптом:

<div >
<div >
<div >
<div >
<div >
<div data-tab=»item1″>
<h3>7 главных вещей​ в бизнесе <i ></i></h3>
</div>
<div >
<p>
Планирование бизнеса требует большой осторожности и внимания к деталям.
</p>
</div>
</div>

<div >
<div data-tab=»item2″>
<h3>
5 советов по локальному SEO <i ></i></h3>
</div>
<div >
<p>
Локальное SEO означает оптимизацию видимости веб-сайта для условий локального поиска в результатах локального поиска.
</p>
</div>
</div>

<div >
<div data-tab=»item3″>
<h3>
3 стратегии SEO-линкбилдинга <i ></i></h3>
</div>
<div >
<p>
Создание ссылок означает получение обратных ссылок на ваш сайт. Обратные ссылки — это ссылки с внешних сайтов на ваш сайт.
</p>
</div>
</div>

<div >
<div data-tab=»item4″>
<h3>Как повысить уровень своей SEO <i ></i></h3>
</div>
<div >
<p>
Знаете ли вы, что вы можете получить гораздо больше от своей стратегии SEO с помощью простых настроек, таких как уделение большего внимания тому, как вы организуете свои ключевые слова?
</p>
</div>
</div>

.voprosnik <
width: 80%;
margin: 100px auto;
>

.voprosnik h3 <
text-align: center;
font-family: «Roboto», sans-serif;
font-weight: bold;
>

.klundesaga-item <
background-color: #0b3791;
margin-bottom: 20px;
border: 1px solid #100e34;
border-radius: 5px;
color: #ffffff;
>

.klundesaga-item .klundesaga-title <
cursor: pointer;
padding: 20px;
transition: transform 0.4s ease-in-out;
>

.klundesaga-item .klundesaga-title.active-title <
background-color: #100e34;
color: #ffffff;
>

.klundesaga-item .klundesaga-title h3 <
font-weight: 700;
margin: 0;
font-size: 18px;
display: flex;
justify-content: space-between;
font-weight: bold;
>

.klundesaga-item .klundesaga-title i.fa-chevron-down <
transform: rotate(0);
transition: 0.4s;
>

.klundesaga-item .klundesaga-title i.fa-chevron-down.chevron-top <
transform: rotate(-180deg);
color: #fa5019;
>

.klundesaga-item .klundesaga-content <
display: none;
line-height: 1.7;
padding: 20px;
background-color: #ffffff;
border-radius: 0 0 5px 5px;
color: #100e34;
>

.klundesaga-item .klundesaga-content.active <
display: block;
>

.klundesaga-item .klundesaga-content p <
margin: 0;
font-family: «Nunito Sans», sans-serif;
font-size: 16px;
>

.sadelpos <
background: #dce1f2;
>

.sadelpos .detailed_info <
margin: 50px auto;
>

.sadelpos img <
margin: 0 auto;
display: block;
/* margin-top: 120px; */
>

.sadelpos h3 <
font-family: «Poppins», sans-serif;
font-weight: bold;
font-size: 20px;
>

.sadelpos p <
font-family: «Nunito Sans», sans-serif;
font-size: 16px;
line-height: 1.5em;
>

.sadelpos ul li <
font-family: «Nunito Sans», sans-serif;
font-size: 16px;
line-height: 1.7em;
>

$(document).ready(function () <
$(«.klundesaga-title»).click(function (e) <
var klundesagaitem = $(this).attr(«data-tab»);
$(«#» + klundesagaitem)
.slideToggle()
.parent()
.siblings()
.find(«.klundesaga-content»)
.slideUp();

$(this).toggleClass(«active-title»);
$(«#» + klundesagaitem)
.parent()
.siblings()
.find(«.klundesaga-title»)
.removeClass(«active-title»);

$(«i.fa-chevron-down», this).toggleClass(«chevron-top»);
$(«#» + klundesagaitem)
.parent()
.siblings()
.find(«.klundesaga-title i.fa-chevron-down»)
.removeClass(«chevron-top»);
>);
>);

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

Но как пример регистрация, что изначально нужно сделать, также какие знаки в пароле переменяться, или обязательно все писать с большой буквы, ведь все это учитывается, в таком направление. Не говоря про цветовую гамму, здесь вы уже самостоятельно подбираете нужный вам оттенок цвета, который прописан в CSS, и выставляете его под основной стиль сайта.

Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS

Задача. Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.

Решение 1. Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот HTML и CSS Код №1 для примера:

• Тег input должен обязательно стоять перед обрабатываемым контентом . Через него происходит переключение, с помощью тега label и ссылаемся на чекбокс input через for=»read-more-checker» .
• В теге div с class=»limiter» размещается сам контент. В его стилях мы и устанавливаем необходимую высоту видимого контента.
• Тег div с class=»bottom» – это блок с градиентным фоном, который показывает, что под контент не полный и внизу есть что-то ещё. Его нужно настроить под свой контент.
• Тег label с class=»read-more-button» – тот элемент через который будет осуществляться скрытие и отображение всего контента. Также благодаря псевдоэлементам :after и :before мы можем сделать чтобы текст в условной кнопке для разворачивания изменялся в зависимости от состояния (Развернуть/Свернуть).

Источник: Aida Drogan

Решение 2. Дополнение к Решению 1, когда блоков где текст скрывается под кат несколько. Если блоков несколько, то и class, id, for со значением ‘read-more-checker’ должны различаться у всех блоков, а в стилях нужно продублировать правила где есть класс read-more-checker для новых блоков.

Можно немного уменьшить код за счет использования пользовательских атрибутов data- , а class=»read-more-checker» убрать — Код №2.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

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

Имеете в виду если раскрывающийся блок находится в самом верху, то при клике на Раскрыть страница прокручивается так что этот желтый блок становится по середине?

Интересно, конечно.
Если придумаете, то пишите ��

Решил вопрос, заменив у .limiter .bottom absolute на sticky

Спасибо, всё супер, но возникла проблема. Если на странице несколько разворачивающихся блоков, то когда разворачиваешь верхний, то разворачиваются и те, что ниже. Как этого избежать?

Если есть несколько таких блоков, то у них должны быть разные class, id и for ‘read-more-checker’. Например, для первого блока используем class, id, for — «read-more-checker«. Для второго — ‘read-more-checker-2′, третьего — ‘read-more-checker-3′ и т.д. А в стилях нужно продублировать все правила где есть класс ‘read-more-checker’ через запятую.
Например, у нас было с одним блоком такое правило:
.read-more-checker:checked