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

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

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

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

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

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
3. Будет доступно управление элементами с клавиатуры и других устройств.
4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
6. Работает при выключенном javascript.

1. Старые браузеры не знают таких тегов и не будут скрывать информацию.

С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.

К сожалению, у дефолтного маркера есть два недостатка:

1. Старые браузеры его не видят.
2. Вебкит баузеры не позволяют менять символ маркера.

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

Svg маркер + анимация поворота:

Summary:before пришлось серьезно переделать:

1. Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
2. Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
3. Картинку вешаем при помощи background.

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Svg маркер справа + эффект зеркального поворота стрелки:

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

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

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Раскрывающийся текст ответа на вопрос в 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

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

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

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

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 и отказаться от использования идентификаторов. Здесь вы можете посмотреть готовую страницу с раскрывающимися текстовыми блоками.