Как сделать текст под спойлером
Аккордеон, faq, спойлер и другие раскрывающиеся виджеты
Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary
Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:
С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.
К сожалению, у дефолтного маркера есть два недостатка:
Рассмотрим первый пример Details/Summary с измененным текстовым маркером:
Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before
summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.
Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.
Текстовый маркер справа + простейшая анимация текста и маркера:
В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.
Анимация маркера при помощи transform: scale(1,-1);
Svg маркер + анимация поворота:
Summary:before пришлось серьезно переделать:
Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.
Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.
Для summary поставить padding-right: 1.5em;
Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:
Svg маркер справа + эффект зеркального поворота стрелки:
Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.
Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.
Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.
С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio
Создаём спойлер для сайта на HTML за 5 шагов
Навигация по статье:
Приветствую Вас дорогой читатель! Не так давно я столкнулась с проблемой создания на сайте блока с раскрывающимся текстом, так называемого спойлера для сайта. И хочу поделиться найденным решением с Вами.
Что понадобится для создания спойлера на HTML?
Шаг 1. Подключаем библиотеку Jquery
Это можно сделать двумя способами:
Шаг 2. Верстаем спойлер на HTML
У меня код спойлера выглядит следующим образом:
Шаг 3. Прописываем скрипт для спойлера
В самом низу страницы перед тегом body
Нужно дописать следующий скрипт:
Шаг 4. Дописываем стили для разворачивающегося текста.
Для того чтобы блок с контентом был изначально скрыт и появлялся только после нажатия на спойлер в файл стилей нужно прописать:
Если вы хотите добавить немного привлекательности своему спойлеру, то в файл стилей нужно прописать следующий код:
Шаг 5. Проверяем работу спойлера на сайте
Если по каким либо причинам ваш спойлер не заработал попробуйте сделать следующее:
С уважением Юлия Гусарь
Читайте также:
Подписаться на рассылку
24 комментария
Приветствую. Спойлер оригинальный, понравился. Все работает отлично, но вот что надумал реализовать (пока безуспешно, не специалист :)) А можно каким-то образом в блоке открывшегося контента поставить кнопку, которая служила бы то есть для закрытия? 🙂 Понятно, что посетитель может нажать ту же кнопку, что и для открытия, но тем не менее, бывает такое, что не каждый догадается.
Здравствуйте!
Можно попробовать добавить в блоки спойлера блок с классом «close-button», оформить его в виде кнопки, а затем дописать для него скрипт:
$(‘.close-button’).click(function() <
$(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
return false;
>);
Его нужно вставить в тот скрипт, который я давала в статье после строк:
$(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
return false;
>);
Еще не по теме, можно ответить на мейл а не сюда, т.к. оффтоп.
у меня для вопросов и отзывов стоит тот же плагин что и у вас, у вас платная версия? просто отличается от моего, может это все в настройках есть, а я не нашел, т.к. сильно еще не вникал в него, но тем не менее сходу не увидел такой возможности. Например у меня если написать отзыв который идет на модерацию, то при обновлении странички он исчезает из виду, пока его не одобрят, у вас он доступен с надписью что он на модерации, тоже бы так хотелось. да и вообще стиль оригинальный, я тоже постарался убрать все ненужное (кнопку меню, по которой доступно 3 пункта, 2 из которых реклама и еще убрал из футора добавку, которую плагин внедряет, если навести курсор на копирайт, там появляется 2 значка) В общем, интересно знать, если у вас платная версия, тогда я пойму, почему они такие разные, если бесплатная — буду искать настройки…
Здравствуйте, Андрей! Вы имеете ввиду систему hypercomments? Если да, то у меня бесплатная версия.
Извините за спамм,но я наконец понял, у вас 3 типа отзывов, я не обратил внимание.
1 — через ВК
2 — плагин hypercomments, именно его я имел введу, когда спрашивал
3 — а вот этот вид отзывов заинтересовал. Можете сообщить, как такой себе на сайт установить? Что это за плагин?
Здравствуйте, Андрей! У меня установлена система комментариев hypercomments. Как нибудь сделаю статью по этой теме
Спасибо за материал. Спойлер работает. Проблема в том, что у меня по умолчанию спойлер раскрыт. Подскажите как изменить настройки.
Возможно ли разделить на два объекта спойлер.
Привет! Если вы видите этот текст, значит скорре всего ваш спойлер работает 🙂
Вы можете заменить этот текст на любой другой.
т.е. первый объект это ссылка, а второй это сам скрытый блок. Но чтобы скрытый блок можно было отнести от ссылки на сколь угодно дальнее расстояние, например в другую ячейку таблицы.. т.е. в первой ячейке таблицы ссылка, в следующей любой контент, в третьей — скрытый блок.
И чтобы ссылка открывала именно тот блок, для которого написана, например чтобы они «чуяли» друг друга по какому-то определеному >
где Х переменная, для разных соответсвующих блоков и ссылок разная
Для этого нужно полностью переделывать верстку спойлера и переписывать скрипт.
а то уж очень понравилась плавность разъезжания скрытого дива, хочу применять для разъезжающихся спойлеров по тексту и так же для организации меню. Но нужно чтобы не по принципу дочернесте, а по принципу самостоятельных двух объектов узнаЮщих друг друга… Заранее спасибо!
Понравился ваш спойлер, просто, удобно и со вкусом 🙂
К сожалению не прогер 🙂 так бы решил задачу. Заранее спасибо 🙂
Извиняюсь, опечатка, по умолчанию первый блок должен быть раскрыт.
Во-вторых — подскажите, пожалуйста.. Можно ли как-то сделать, чтоб после открытия спойлера текст не выезжал от его левого края, а появлялся сразу там, где должен быть?
Здравствуйте, Пит!
Спасибо за Ваш комментарий!
Для данного решения, к сожалению, эффект появления текста выбрать нельзя, но можно задать скорость анимации.
Для этого в скрипте вместо «fast» можно задать значение в миллисекундах, например, «0».
Здравствуйте. Только что сделал спойлер — он поработал час, потом перестал:
1) Сначала прописал стили в общие стили CSS, но они не помогли, пришлось на каждой странице прописывать как script — text.css.
Всё замечательно работало.
2) Через час зашёл на сайт снова — перестало =(
Удалил из общих стилей CSS — не помогло.
Что может быть? Jquery точно доступна
Интересная ситуация :). Даже не знаю. Плагины кеширования какие-нибудь стоят на сайте?
Конкретно проблема в том что Спойлер виден, но при клике ничего не происходит.
Здравствуйте! Прежде всего огромное спасибо за кучу интересной информации на Вашем сайте. Знакомлюсь с WP именно по нему. Но несмотря на многочасовые попытки спойлер так и не заработал.. (WP — Vantage)…. а так хотелось((.
Добрый день! Спасибо за спойлер! Подскажите, как сделать, чтобы предыдущие спойлеры сами закрывались, т.е. чтобы открытым был только один спойлер?
Очень понравился материал, воспользовался, спасибо!
Есть замечание к оформлению, долго не мог найти где пример. Блок «Посмотреть пример» «Скачать исходник» оформлен как рекламный блок, такое у нас отфильтровывается и как информация не воспринимается.
В целом, всё круто, спасибо большое!
Спойлер с красивой кнопкой на HTML + CSS
Здесь он отлично впишется под любой дизайн, хотя по умолчанию идет в темном каркасе, где по вверх идет светлая кнопка на которой подключены градиенты. Такой стиль на Spoiler больше сделан для статей или материалов, ведь на простом вопросе задействуют стандартный стиль. Здесь же он идет под оформление, где совершенно не будет грузить страницу, и под него выводят, как описание, так и разные элементы, виде картинок или фотографий.
Так что, решив, украсить свой блок или сайт, то думаю такое решение отлично подойдет под любое описание, которое полностью состоит на стилистике CSS, где дизайн и палитра цвета не сложно поменять, как и сами размеры.
1. При открытии страницы или сайта:
2. Это идет при клике по кнопке:
Приступаем к установке:
[for=»bedamukopeg»]:after <
left: 65px;
>
#bedamukopeg:not(:checked) + label + * < display: none;
>
При открытии вы уведите в самом каркасе светло-синем оттенке ON, стоит только сделать клик, как кнопка плавно переедет по правую сторону и откроется тема, что изначально скрыта была, но уже будет наблюдать OFF в темном оттенке.
Спойлер с плавным открытием и закрытием
1.1. При открытие портала:
1.2. И при открытие информаций:
Проверяя на работоспособность первый вариант, то попался этот, который больше под стандартный вид подходит. Возможно кому пригодится, ведь он аналогично идет на чистом стиле. А это означает, что веб разработчик может его кардинально изменить по оформлению. Также при открытие он имеет свое окно, которое подается в другом оттенке цвета, где может находится описание или ссылки на изображение.
Ускоренная проверка информации на данный момент.
Вашему вниманию простой стиль дизайна в одной палитре цвета, где можно добавить градиент и сделать обвод, вообщем, чтоб соответствовал основному стилю.
Есть очень много разных направлений, где веб разработчик или администратор сайта может использовать функций скрытия важной информации в спойлере от ваших гостей и зрителей.
Если вы хотите скрыть что-то вроде окончания большой статьи или фильма или ответы на загадки. То здесь как раз можно задействовать малоизвестный трюк HTML, называемый спойлером.
На форумах и в сообществах часто задается вопрос, как сделать текст спойлер в Дискорде. Эта опция пригодится, когда необходимо спрятать какое-то изображение, текстовое сообщение, смайлики или другую информацию. Ниже рассмотрим, что это такое, для чего необходимо, и как сделать на телефоне и ПК.
Что это такое
Перед тем как разобраться, что такое спойлер в Дискорде, поговорим о назначении этого термина. Он произошел от английского слова spoiler или spoil. Первое переводится как помеха, а второе — портить или мешать. Упомянутое определение получило широкое распространение и применяется во многих сферах, в том числе в авиационной, автомобильной, литературной и т. д.
Наиболее близким является его применение в программировании. Здесь спойлер показывает на объект, который необходимо спрятать на какое-то время. Такой же подход действует и в Дискорд. После включения спойлера сведения прячутся в специальный карман. Чтобы почитать сообщение или увидеть файл, необходимо нажать на прямоугольник.
Специальное поле можно сделать для разных элементов:
К примеру, если отправитель сделал текст в спойлере, пользователь Дискорд видит прямоугольное черное поле. При нажатии на него появляется спрятанная надпись. Аналогичный подход наблюдается и для других файлов.
Как включить
Отдельного внимания заслуживает вопрос — как делать спойлер в Дискорде, ведь многие люди даже не пользуются опцией. Это объясняется тем, что они не знают о ней и не умеют включать. При этом существует несколько способов, как активировать функцию. Рассмотрим каждый из них.
Если все сделать правильно, указанный текст оказывается за темным прямоугольником. Если на него кликнуть, появляется интересующее слово.
При желании можно использовать любой из приведенных способов. Если текстовая или иная информация уже открыта, сделать ее закрытой уже не выйдет.
Как сделать текст спойлер в Discord на телефоне
Немного сложней обстоит ситуация, если под рукой находится только телефон. В таком случае работает исключительно второй метод. Для его использования войдите в приложение на смартфоне, напишите сообщение и возьмите его с двух сторон в двойные вертикальные полоски. Аналогичный подход работает не только с текстом в Дискорд, но и со встроенными ссылками.
Если у вас под рукой телефон с iOS, сделать спойлер проще. Наберите текст, выделите его и в контекстном меню выберите Mark as Spoiler. При этом важно, чтобы набранная фраза оказалась между установленными линиями.
Как пользоваться
Выше мы рассмотрели, как писать текст в спойлере Discord. Но иногда при пользовании ставятся более серьезные задачи. Рассмотрим несколько вариантов:
Если говорить в целом, можно сделать спойлер для любой информации, которая отправляется пользователю в Дискорде. Это может быть не только текстовое сообщение, но и фотография, документ, эмодзи и другое.
Как отключить
Многие пользователи отмечают, что им не нравится функция, и они хотят сразу видеть информацию и не тратить время на ее открытие. В таком случае настройки можно изменить и отключить опцию.
Сделайте следующие шаги:
Здесь в распоряжении владельца профиля три варианта на выбор:
В большинстве случаев подходит первый вариант, ведь при общении с людьми должно оставаться место загадке. Но здесь уже каждый решает, какой вариант ему подходит больше всего.
Итоги
Теперь вы знаете, как сделать текст спойлер в Дискорде с телефона или компьютера. Это полезная опция, позволяющая придать интриги во время общения. Если вам не нравится, когда кто-то прячет текст, функцию можно отключить для своего сервера или выключить вовсе. В последнем случае текст будет всегда открыт, даже если отправитель поместил его в спойлер.
Спрятать текст по спойлер
Чтобы отправить ответ, вы должны войти или зарегистрироваться
Сообщений [ 6 ]
1 Тема от spark 17.10.2014 14:52:47
Тема: Спрятать текст по спойлер
Подскажите, пож-та, как спрятать текст вот под такой спойлер. Всё перерыл. word 2013. В соседней теме забыл загрузить файл, а как редактировать не нашел..
спойлер.docx 15.35 Кб, 24 скачиваний с 2014-10-17
You don’t have the permssions to download the attachments of this post.
2 Ответ от Alex_Gur 17.10.2014 15:51:58
Re: Спрятать текст по спойлер
Подскажите, пож-та, как спрятать текст вот под такой спойлер. Всё перерыл. word 2013. В соседней теме забыл загрузить файл, а как редактировать не нашел..
Уточните, пожалуйста, что нужно сделать.
Что спрятать? Под какой именно спойлер?
Ваш файл у меня открылся в таком виде:
Спойлер1.JPG 119.82 Кб, 3 скачиваний с 2014-10-17
You don’t have the permssions to download the attachments of this post.
3 Ответ от spark 20.10.2014 09:21:51
Re: Спрятать текст по спойлер
Есть текст, слева рядом с этим текстом маленький треугольничек, нажатие на этот треугольничек как-бы сворачивает и разворачивает текст которые идет ниже под этим предложением.
Сделал скрин шот.
При нажатии на эту стрелочку текст разворачивается.docx 91.18 Кб, 38 скачиваний с 2014-10-20
You don’t have the permssions to download the attachments of this post.
4 Ответ от spark 20.10.2014 09:23:53
Re: Спрятать текст по спойлер
Еще один файл из шаблонов word где присутствует эта функция.
Список дел для командировки (шаблон).docx 33.89 Кб, 39 скачиваний с 2014-10-20
You don’t have the permssions to download the attachments of this post.
5 Ответ от Alex_Gur 20.10.2014 13:42:21
Re: Спрятать текст по спойлер
6 Ответ от spark 20.10.2014 13:49:36
Re: Спрятать текст по спойлер
Сообщений [ 6 ]
Чтобы отправить ответ, вы должны войти или зарегистрироваться
Вы можете помочь в развитии форума, сделав пожертвование:
Или помочь сайту популярной криптовалютой:
BTC Адрес: 1Pi3a4c6sJPbfF2sSYR2noy61DMBkncSTQ
ETH Адрес: 0x7d046a6eaa1bd712f7a6937b042e9eee4998f634
LTC Адрес: LUyT9HtGjtDyLDyEbLJZ8WZWGYUr537qbZ
USDT (ERC-20) Адрес: 0x7d046a6eaa1bd712f7a6937b042e9eee4998f634
Яндекс Деньги: 410013576807538
Похожие темы
Спрятать текст по спойлер
Студентам, преподавателям, офисным работникам, бухгалтерам и очень многим другим категориям пользователей приходится часто сталкиваться с набором, оформлением и редактированием текстов в редакторе текстов Ворд. На портале о Microsoft Office Word вы узнаете про: уплотнение слов в ворде.
Поэтому это мощное приложение необходимо изучить досконально, для максимальной оптимизации своей работы. Наш сайт о Microsoft Office Word даст ответ про: линейка в см. Такую возможность дает сайт Ворд Эксперт. На форуме сайта вы к тому же можете обсудить различные нюансы с другими пользователями. На портале о Microsoft Office Word вы узнаете про: office 2010 формат шрифта.