Как сделать спойлер в сообщении
Аккордеон, 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
Единый форум поддержки
Меню навигации
Пользовательские ссылки
Информация о пользователе
Вы здесь » Единый форум поддержки » Корзина » спойлер в объяве|как сделать кнопку|обычный спойлер
спойлер в объяве|как сделать кнопку|обычный спойлер
Сообщений 1 страница 20 из 40
Поделиться1Чт, 27 Окт 2011 00:34:32
Собственно. Возникло на форуме три небольших трабла:
1. Так сказать «спойлер» в таблице. Навигация, по-другому. То есть кнопка, при нажатии на которую выдвигается инфо с чем-либо. Вроде выдвигалось все нормально (у нас там баннеры партнеров), а в последнее время не работает вообще о.о Из кода вроде как ничего не удаляли. Не подскажете, в чем может быть трабл?
2. Нужна кнопка. А точнее картинка ака кнопка. Самый просто код находили, чтобы появлялось окошко «Кнопку нажали», например.. но появились вопросы. Нужно, чтобы при нажатии на эту картинку-кнопку появлялось окошко с количеством нажатий на него. Например: нажал петя, вася, саша, коля, а потом пришла маша, нажала и ей окошко «Кнопку нажали 5 раз». типа того.. возможно ли это? Если да, то хотелось бы узнать, как.) И еще к этому бы прибавить функцию «можно нажать раз в день\час\месяц\пр.»
3. С обычным спойлером беда какая-то. Два спойлера поставить в один пост не получается. нажимаешь на второй, а открывается первый.. о_О а второй вообще нет. и нельзя писать «название» спойлера. Стоит ли разбираться с этим кодом или послать его в темный лес и искать новый?
Наш форум: http://ignotus.bbmy.ru
Отредактировано cannelle (Вт, 1 Ноя 2011 12:15:24)
Поделиться2Чт, 27 Окт 2011 01:11:09
cannelle, какие скрипты Вы устанавливали крайними?
У Вас в HTML-низ есть непонятное слово «Код:», оно там откуда? Уберите его.
Что-то у Вас с чем-то кусается.
Для начала, переместите свой скрипт выпадающего окна с баннерами в Объявление, после таблицы. Вот этот код:
Тогда баннерная кнопка исправится.
А после этого посмотрите что будет со спойлерами по Вашему третьему вопросу.
Отредактировано Кофеман (Чт, 27 Окт 2011 01:12:05)
Поделиться3Чт, 27 Окт 2011 01:22:41
cannelle, какие скрипты Вы устанавливали крайними?
так. в хтмл-низ крайним стоит кнопочка пиар-входа. в хтмл-верх стоит вот это (простите, не знаю, для чего оно.. не одна я в скриптах ползаю х_х):
UP: а, нет. знаю. это, вероятно, об редактировании сообщения о.о чтобы не показывало эти вот слова.
У Вас в HTML-низ есть непонятное слово «Код:», оно там откуда? Уберите его.
Для начала, переместите свой скрипт выпадающего окна с баннерами в Объявление, после таблицы.
да, действительно, спасибо, кнопка исправилась))
а вот обычный спойлер все еще фигню всякую выдает. =\ он у нас давно так. еще с лысых времен, просто как-то мирились с этим, а сейчас надоело х_Х
Отредактировано cannelle (Чт, 27 Окт 2011 01:23:43)