Как сделать спойлер в php
Спойлер с красивой кнопкой на HTML + CSS
Здесь он отлично впишется под любой дизайн, хотя по умолчанию идет в темном каркасе, где по вверх идет светлая кнопка на которой подключены градиенты. Такой стиль на Spoiler больше сделан для статей или материалов, ведь на простом вопросе задействуют стандартный стиль. Здесь же он идет под оформление, где совершенно не будет грузить страницу, и под него выводят, как описание, так и разные элементы, виде картинок или фотографий.
Так что, решив, украсить свой блок или сайт, то думаю такое решение отлично подойдет под любое описание, которое полностью состоит на стилистике CSS, где дизайн и палитра цвета не сложно поменять, как и сами размеры.
1. При открытии страницы или сайта:
2. Это идет при клике по кнопке:
Приступаем к установке:
[for=»bedamukopeg»]:after <
left: 65px;
>
#bedamukopeg:not(:checked) + label + * < display: none;
>
При открытии вы уведите в самом каркасе светло-синем оттенке ON, стоит только сделать клик, как кнопка плавно переедет по правую сторону и откроется тема, что изначально скрыта была, но уже будет наблюдать OFF в темном оттенке.
Спойлер с плавным открытием и закрытием
1.1. При открытие портала:
1.2. И при открытие информаций:
Проверяя на работоспособность первый вариант, то попался этот, который больше под стандартный вид подходит. Возможно кому пригодится, ведь он аналогично идет на чистом стиле. А это означает, что веб разработчик может его кардинально изменить по оформлению. Также при открытие он имеет свое окно, которое подается в другом оттенке цвета, где может находится описание или ссылки на изображение.
Ускоренная проверка информации на данный момент.
Вашему вниманию простой стиль дизайна в одной палитре цвета, где можно добавить градиент и сделать обвод, вообщем, чтоб соответствовал основному стилю.
Есть очень много разных направлений, где веб разработчик или администратор сайта может использовать функций скрытия важной информации в спойлере от ваших гостей и зрителей.
Если вы хотите скрыть что-то вроде окончания большой статьи или фильма или ответы на загадки. То здесь как раз можно задействовать малоизвестный трюк HTML, называемый спойлером.
Как сделать спойлер на сайте html код и плагин BBSpoiler
В этой статье мы разберем, как сделать спойлер на сайте двумя способами: при помощи html кода, либо используя плагин BBSpoiler. Спойлер это скрытие текста или картинки в виде выпадающего списка, содержание которого можно посмотреть при нажатии на сам спойлер. Зачем нужен спойлер для сайта? В некоторых ситуациях спойлер незаменимый инструмент скрытия большого объема не целевой информации.
Плейлист “Как создать сайт на WordPress”
TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО
Например, в статье необходимо разместить более 30 однотипных изображений друг за другом, либо дополнить статью комментарием эксперта, либо под видео разместить его текстовую версию. В общем, в некоторых случаях определенная часть информации занимает неоправданно много места. Уместно скрыть такую информацию под спойлер, заинтересованный читатель развернет его и ознакомится с содержимым.
Живой пример на моем блоге это статья “Автосерфинг“. Периодически (раз в несколько месяцев) я снимаю видео обзор всех проектов, представленных в статье, и показываю вывод денег. Затем скриншоты выплат публикую в самой статье. На момент написания статьи таких видео обзоров снято четыре штуки, под каждым опубликовано не менее 8 скриншотов. Согласитесь, в данном случае лучше скрыть скриншоты выплат под спойлером, иначе вся статья будет состоять из одних картинок.
Ситуации бывают разные. Поэтому грамотный веб-мастер должен знать, как реализовать на сайте такой интересный инструмент программирования, как спойлер. Теперь давайте поговорим о том, какими способами можно разместить спойлер на сайте.
Сделать спойлер на сайте можно либо с помощью специального html кода, либо с помощью плагина. Оба способа имеют как положительные моменты, так и отрицательные. Что касается плагина, с ним спойлер размещается очень легко, но плагины нагружают базу данных, что замедляет работу сайта. Html код не грузит базу данных, но при переключении из текстового в визуальный редактор спойлер начинает некорректно отображаться.
Основываясь на личном опыте введения блога, могу сказать, что в данном случае намного удобней воспользоваться плагином. Дальше будут разобраны два способа размещения спойлера на сайте, вы же выберете тот, который подходит к конкретно вашей ситуации.
Как сделать спойлер для сайта при помощи плагина. BBSpoiler единственный WordPress плагин спойлер, сумевший вывести спойлер на мой блог. Ни один другой плагин не смог корректно отобразить спойлер на моем сайте. Для установки плагина BBSpoiler перейдите в административную панель “WordPress” ⇒ “Плагины” ⇒ “Добавить новый” и в форме поиска вбейте “BBSpoiler”. Затем нажмите установить и активировать. Все, установка завершена.
Настраивать плагин не нужно. После установки в визуальном редакторе WordPress появится специальная кнопка “Спойлер”. Вот так она выглядит:
Нажимаете на эту кнопку, вводите заголовок, вставляете текст, выбираете стиль и нажимаете “Ok”:
Если вам нужно добавить в спойлер простой текст, вставляете текст. Если текст должен быть в определенном стиле (например, необходимо задать размер и цвет шрифта), копируете текст с готовыми стилями из текстового редактора (не из визуального редактора, только в текстовом сохраняются стили) и вставляете в текстовое поле плагина.
Если нужно добавить изображения, вначале добавляете все необходимые картинки в статью, если нужно задаете стили, вырезаете код из текстового редактора и вставляете в плагин. Все отображается корректно и достаточно симпатично. Вордпресс спойлер плагин BBSpoiler лучший плагин в данном направлении.
Как сделать спойлер на сайте готовый html код. Сейчас разберем, как сделать красивый спойлер для сайта без плагина, посредством html кода. Спойлер html будет плавно открываться и закрываться. Для начала добавьте в файл function.php два кода:
Внимание! На блоге в целях защиты авторского права включена защита от копирования текста стандартными методами. Чтобы скопировать код, в поле вывода кода в правом верхнем углу нажмите на плюс. После нажатия код откроется в новом окне, откуда его можно скопировать без каких-либо проблем.
Спойлер html код. Затем нужно вставить в текстовый редактор страницы, где хотите разместить спойлер, следующий код:
ЗАГОЛОВОК СПОЙЛЕРА это название, при нажатии на которое, будет открываться спойлер. ВАШ ТЕКСТ это текст вашего спойлера. Как и в случае с плагином, в данный спойлер можно вставлять изображения (как это сделать, рассказано выше).
Ну и последнее, чтобы спойлер при загрузке страницы был закрытым, нужно в файл header.php между тегами и вставить следующий код:
Вот и все, настройка спойлера завершена. Вот так будет выглядеть спойлер на сайте:
Но здесь есть один негативный момент. После добавления кода спойлера в текстовый редактор нужно обновиться и не переходить в визуальный редактор. Дело в том, что при переключении в визуальный режим WordPress автоматически редактирует код, в итоге часть кода пропадает и спойлер некорректно отображается. Учтите это.
В принципе, если полностью отредактировать статью так, чтобы больше не было нужды что-то в ней менять, затем в текстовый редактор добавить код спойлера, обновиться и больше не заходить в визуальный редактор, в этом случае все будет отображаться корректно. Немного неудобно, получается с html кодом нужно чуток повозиться. Именно поэтому я рекомендую использовать плагин BBSpoiler.
Вот мы и рассмотрели два способа добавления спойлера на сайт. С помощью html кода спойлер будет с плавным открытием и закрытием, но придется редактировать статью только в текстовом редакторе. С плагином все намного проще, но окончательный выбор, как всегда, за вами. Если кто-то знает, как сделать так, чтобы часть кода не пропадала при переключении на визуальный редактор, напишите, как это реализовать в комментариях под статьей.
3 comments on “ Как сделать спойлер на сайте html код и плагин BBSpoiler ”
Очень хороший плагин! Давно им пользуюсь т.к. на 100% выполняет все свои обязанности и не нагружает систему.
Согласен, отличный плагин.
Спасибо за статью. Вдохновился и написал свой обзор на плагин от flector’a – bbspoiler. ^-^
Добавить комментарий Отменить ответ
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Создаём спойлер для сайта на 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)…. а так хотелось((.
Добрый день! Спасибо за спойлер! Подскажите, как сделать, чтобы предыдущие спойлеры сами закрывались, т.е. чтобы открытым был только один спойлер?
Очень понравился материал, воспользовался, спасибо!
Есть замечание к оформлению, долго не мог найти где пример. Блок «Посмотреть пример» «Скачать исходник» оформлен как рекламный блок, такое у нас отфильтровывается и как информация не воспринимается.
В целом, всё круто, спасибо большое!
Как сделать спойлер?
#1 El Marshal Che
Хочется, для красоты и удобства, сделать на странице спойлер.
Должно выглядеть так:
При нажатии на слова вылетает куча контента. При повторном нажатии, соответственно, схлопывается.
Как это сделать?
#2 MAzZY
#3 El Marshal Che
#4 Fitsh
Не флудим, не флудим
#5 mrZer0
#6 Fitsh
Время жмет, накидал по-быстрому
#7 El Marshal Che
Что-то не вкурю что там не надо писать, чтобы корректно все отобразилось :-[
#8 php5
в JED в первую очередь искать надо. обычно нужное наверху
#9 Fitsh
#10 El Marshal Che
Итак.
Потестил оба варианта. Резюмирую.
1. Minitek FAQ Book реально крут. Но надо русифицировать и, в данном случае, не нужен такой функционал. Но за наводку спасибо, вещь интересная.
2. Пыщь-Пыщь реально крут. Без вариантов.
#11 El Marshal Che
В общем, все сделал, все настроил, все теперь красиво.
Но. В виду того, что выделение красивостей внутре текста я делал через span, и span’ом же делались заголовки для спойлеров, то внутренние выделения (слово-то какое смешное, хехе) копируют свойства тех, что в спойлере.
#12 MAzZY
#13 El Marshal Che
Ну т.е. как-то реализовать что-то вроде якорной ссылки.
#14 MAzZY
#15 El Marshal Che
Ля-ля-ля, вступительный текст
Заголовок 1
Заголовок 2
#16 dik
#17 El Marshal Che
#18 Fitsh
Выходит нам нужно добраться до элемента без анимации, то есть вычислить на сколько провернуть окно для этого случая.
Добавляем это туда пару моментов.
получаем:
#19 El Marshal Che
Эпопея закончена.
Надо было только поправить js.
Вот как это выглядит у меня теперь:
и собственно яваскрипт:
goWin-37 сделано для того, чтобы, при открытии спойлера, страница прыгала не к первому скрытому элементу, а еще и заголовок показывала (тот, который Заголовок 1 в коде). Значение (-37) задается в пикселях и подбиралось экспериментально. Если же не иметь такого желания (заголовки кому попало показывать), то «-37» из кода надо убрать.
Пыщь-Пыщь, большое спасибо!
UPD: Забыл указать, что яваскрипт работает из index.php шаблона используя изменение кода страницы в зависимости от УРЛ.
#20 Саныч
Как сделать спойлер на сайте без использования плагинов и модулей разобрались.