Как сделать спойлер в dreamweaver
Аккордеон, 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, называемый спойлером.
Как сделать спойлер в dreamweaver
При наполнении сайта контентом особую роль отводят его качеству – это и понятно, ведь именно качественные статьи представляют ценность как для посетителей, так и для поисковых систем. Но если уделять внимание только этому, то велика вероятность, что статью никто не оценит! Как такое может быть?
Представьте, что на сайте публикуется очень длинная статья, как их еще любят называть в интернете – портянка. В ней нет ничего кроме текста: ни картинок, ни заголовков, ни выделений и т.д. Даже если это именно то, что Вам нужно, наверняка статья не будет прочитана до конца.
Теперь представьте такую же статью, только с соблюдением должного оформления:
Вопрос скрытия/открытия контента довольно актуальный. Мы уже рассматривали как в одном и том же месте, на том же пространстве страницы сайта, можно вывести куда больше материала, чем это кажется на первый взгляд: статья про табы (своеобразные вкладки для вывода различной информации в одном и том же месте). В этой же статье речь пойдет о спойлерах для сайта wordpress.
Чтобы не вдаваться в определение спойлера сразу приведу пример:
Текст спойлера. Открывается/закрывается при клике.
Данный вид спойлера реализован при помощи плагина для wordpress, который будет рассмотрен ниже. Но прежде чем это сделать хочу показать Вам еще один вид спойлера: его можно наблюдать в нижней части шапки на этом блоге:
Кликните по нему и Вы увидите содержание данного спойлера. Он реализован без плагинов, этот вариант мы так же рассмотрим ниже.
Для чего нужны спойлеры на сайте?
Пара примеров применения спойлеров:
Поисковые системы без проблем индексируют содержание спойлеров, так что за это переживать ни в коем случае не нужно.
Спойлер на WordPress – как сделать с помощью плагина.
Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры в дизайн статей блога не составит никакого труда.
Выбираем эффект появления и текст при закрытом/открытом спойлере:
На этом вопрос редактирования настроек и применения спойлеров на wordpress при помощи плагина Advanced Spoiler можно закрыть. Но меня немного не удовлетворил результат работы плагина, а именно не совсем непонятно где кончается спойлер и продолжается статья, поэтому я посмотрел какой блок отвечает за стили внутреннего содержания спойлера и дописал их.
Я например для себя написал следующее:
Спойлер для сайта без плагинов.
Конечно владельцам сайтов на движке WordPress можно ограничится и плагином, но мне захотелось создать свой спойлер, с уникальными стилями и выводом. Да и не у всех же сайты на WP, поэтому эта статья должна им помочь в реализации таких вставок.
Что бы добавить спойлер в нужное место скопируйте вот этот код:
Замените два участка этого кода, на то что требуется:
Название спойлера выполнено в виде кнопки ( type=”button” ) с классом: class=”input-button”.
Управление эффектами Spry
Правка и удаление уже созданного эффекта Spry, а также переупорядочивание эффектов, привязанных к одному событию, выполняются так же, как аналогичные операции с поведениями Dreamweaver (см. главу 15 ).
А теперь — внимание! Если мы удалим все эффекты Spry на всех Web-страницах, то нам обязательно следует удалить файл Web-сценариев SpryEffects.js. (В нашем случае он хранится в папке others, но вообще может иметь другое местоположение.) Как мы знаем, он хранит Web-сценарии, реализующие функциональность всех эффектов Spry, и, если эффекты больше нигде не используются, оказывается лишним. А лишние файлы нам в Web-сайте не нужны!
По мнению автора, эффекты Spry следует использовать только в крайнем случае и крайне умеренно, только чтобы привлечь внимание посетителя к какому-либо элементу Web-страницы. Не стоит уподобляться Web-дизайнерам, чьи Web-страницы дергаются и рябят, как плохо настроенный телевизор. Поэтому лучше все же удалить все эффекты Spry, что мы создали.
Работа с компонентами Spry
Настала пора разобраться с компонентами Spry, что предоставляет нам Dreamweaver. В отличие от эффектов Spry, они могут принести реальную пользу.
Создание компонентов Spry
Мы рассмотрим создание и настройку пары компонентов Spry, применяемых на практике чаще всего. Сведения об остальных компонентах, используемых не столь часто, можно найти в интерактивной справке по Dreamweaver.
Глава 16. Эффекты и компоненты Spry
Свертываемая панель Spry (спойлер)
Данный компонент, как мы уже знаем, представляет собой панель, разворачивающуюся и сворачивающуюся в ответ на щелчок мышью на ее заголовке. Пользователи Windows-приложений должны быть знакомы с компонентами такого рода.
Сворачивающиеся панели, иначе говоря, спойлеры, используются, чтобы поместить на Web-страницу информацию, интересную не всем посетителям. В таком случае посетитель, которого эта информация интересует, может развернуть панель и просмотреть ее; остальные посетители просто ее пропустят.
Предположим, что нам поступило задание от начальства поместить на главную Web-страницу нашего Web-сайта еще несколько цитат, расхваливающих продукцию фирмы «Веники и швабры». Но, к сожалению, цитаты эти столь громоздки, что при их размещении «как есть» размер Web-страницы увеличивается до неприемлемых размеров. Что нам делать?
Поместить эти цитаты в сворачивающуюся панель Spry. Давайте так и сделаем.
Dreamweaver компонент Свертываемая панель Spry будет выглядеть так, как показано на рис. 16.5.
Рис. 16.5. Компонент Свертываемая панель Spry в окне документа Dreamweaver (выделен)
Если же компонент почему-то не был выделен самим Dreamweaver, мы можем сделать это сами. Достаточно навести на компонент курсор мыши, дождаться, когда над ним появится заголовок, и щелкнуть на этом заголовке.
На рис. 16.5 видно, что Dreamweaver сразу же при создании сворачивающейся панели заполнил ее содержимым. Так, заголовок панели включает текст «Вкладка», а сама панель — текст «Содержимое». Нам потребуется удалить этот текст и ввести вместо него свой.
Укажем в качестве заголовка сворачивающейся панели текст «Мнения других клиентов». В саму панель занесем полученные от начальства цитаты от благодарных
Часть V. Создание интерактивных Web-страниц
покупателей. Чтобы не нарушать оформления главной Web-страницы, оформим каждую из этих цитат в виде примечания. Удобнее всего сделать это, переключившись в режим отображения HTML-кода и заключив абзацы с цитатами и подписями в теги
Если компонент Свертываемая панель Spry выделить, панель Свойства представит нам элементы управления (рис. 16.6), с помощью которых мы сможем задать параметры данного компонента Spry.
Рис. 16.6. Вид панели Свойства после выделения компонента Свертываемая панель Spry
Раскрывающийся список Отображать позволит нам задать, в каком виде Dreamweaver будет показывать компонент Свертываемая панель Spry в окне документа: в развернутом (пункт Открыть ; выбран по умолчанию) или в свернутом (пункт Закрыто ). Это может понадобиться, например, чтобы оценить дизайн Webстраницы при разных состояниях компонента Spry.
Флажок Включить анимацию при установке задействует анимационный эффект при свертывании и развертывании панели. Однако следует иметь в виду, что при задействованной анимации панель может разворачиваться и сворачиваться слишком медленно; это особенно заметно на маломощных компьютерах.
Глава 16. Эффекты и компоненты Spry
Рис. 16.7. Компонент Свертываемая панель Spry в свернутом виде
Рис. 16.8. Компонент Свертываемая панель Spry в развернутом виде
Набор вкладок Spry (гармошка)
А этот компонент можно рассматривать как набор сворачивающихся панелей, оформленных в виде списка. В данный момент времени может быть развернута только одна из этих панелей; если посетитель развернет другую панель, развернутая ранее будет автоматически свернута.
Такой компонент может пригодиться, если нужно поместить на Web-страницу объемный перечень каких-либо позиций с описаниями. При этом посетитель может просмотреть названия всех этих позиций, а, щелкнув на названии какой-либо позиции, увидит ее описание.
Dreamweaver компонент Набор вкладок Spry будет выглядеть так, как показано на рис. 16.9.
Часть V. Создание интерактивных Web-страниц
таким же способом его можно выделить, если Dreamweaver почему-то не сделал этого.
Только что созданный компонент Набор вкладок Spry содержит всего две панели. Их заголовки содержат текст вида «Надпись «, содержимое — вида «Содержимое «. Этот текст вставил туда сам
Рис. 16.9. Компонент Набор вкладок Spry в окне документа Dreamweaver (выделен)
Начнем с первой панели данного компонента. Впишем в ее заголовок название первой категории товаров. Удалим текст, помещенный Dreamweaver на панель, и разместим там описание первой позиции из списка категорий товаров. Для ее формирования используем таблицу, состоящую из одной строки и двух ячеек; первая ячейка будет включать изображение товара, вторая — описывающий его текст. Мы можем добавить к этому тексту краткий перечень серий товаров или еще какиелибо сведения.
Теперь нам как-то нужно переключиться на вторую панель, чтобы задать ее содержимое. Проще всего сделать это, наведя курсор мыши на ее заголовок и подождав, пока в правой его части не появится небольшое изображение глаза. Щелкнем на этом изображении — и данная панель раскроется.
Закончив со второй панелью, добавим в компонент еще две (поскольку у нас четыре категории товаров). Для этого потребуется выделить компонент и воспользоваться панелью Свойства (рис. 16.10).
Рис. 16.10. Вид панели Свойства после выделения компонента Набор вкладок Spry
Глава 16. Эффекты и компоненты Spry
Понятно, что список Панели перечисляет уже присутствующие в компоненте Набор вкладок Spry панели. Мы можем выбрать любую из них; при этом данная панель будет развернута. Это еще один способ переключиться на нужную панель.
Удалить ненужную панель можно, выбрав ее в списке Панель и нажав кнопку со знаком «минус», что находится над этим списком.
Панель будет удалена без предупреждения и вместе со всем содержимым.
Добавим в компонент недостающие две панели и заполним их содержимым. После чего удалим не нужную более таблицу — старый список категорий товаров.
Если на Web-страницах Web-сайта присутствует хоть один компонент Набор вкладок