Как сделать спойлер для сайта

 Статья отредактирована 04.04.2018г

Привет, всем? Если вы на этой странице, значит вы пришли узнать как  сделать спойлер для сайта(блога)?

Сначала немного, что это такое- «Spoiler» для вашего сайта.

Это конструкция, которая скрывает текст, код, картинку, видео и все что нужно спрятать. При нажатии на него открывается, спрятанный длинный текст.

Что нужно для этого:

  • подключить  библиотеку jQuery к сайту
  • разместить код скрипта  в подвале(footer.php)
  • установить еще один код в стили  в файл style.css
  •  иметь под рукой код вставки спойлера в статью

Вот пожалуй и все.

Теперь давайте пройдемся конкретно по каждому пункту в отдельности.

Подключаем библиотеку.

Для этого идем и проверяем, такие файлы: header.php,  function.php,  index.php,  footer.php  на наличие кода.

Как проверить?

Заходите в консоль и выбираете «внешний вид»- «редактор». Появляется куча файлов( с левой стороны). Выбираете искомые и открываете.

Затем в файле набираете комбинацию клавиш  «CTRL+F» — откроется поиск.  Вбейте словосочетание: «jquery.min.js»

Если тут есть такое слово, тогда оно «подсветится», если нет, проверяете дальше.

Если script такой есть, второй раз не прописывайте. Значит у вас уже все подключено.

Еще очень  важное предупреждение.

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

Обычно библиотека подключается в «футере» сайта — footer.php.

Чтобы подключить необходимо вставить скрипт перед закрывающим тегом <body></body>

Вот этот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

И еще один в тоже место.

<script>// <![CDATA[
// < ![CDATA[ $(".closed").toggleClass("show"); $(".title").click(function(){  $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");  if ($(this).parent().hasClass("show"))      $(this).children(".title_h3").css("background","#bbbbbb");  else $(this).children(".title_h3").css("background","#dddddd"); });
// ]]></script>

И обязательно сохранить изменения. Дальше прописываем код в стилях. Для этого откроем файл style.css. И в конце вставим код, который я даю ниже. 

.spoiler {
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid #dfdfdf;
    border-left: 2px solid #a32503;
    box-shadow: 0 0 9px #dddddd inset;
}

.title_h3 {
    cursor:pointer;
    font-size: 14px;
    background: #dddddd;
    margin: 0 -10px 0 -10px;
    padding: 10px;
    padding-left: 30px;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}

.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

Двигаемся к финишу.

Этот код скопируйте и вставьте в блокнот. Он должен быть всегда наготове. 

<div class="spoiler closed">

<div class="title">

<div class="title_h3"><strong>Здесь заголовок спойлера</strong></div>

</div>

<div>А вот здесь будет текст, видео картинки и все остальное</div>

</div>

Его будете вставлять, всегда, когда понадобится спрятать текст под спойлер.

И запомните, код вставляете в статью в режиме text.

Давайте отредактируем вид нашего спойлера. Для этого откроем опять файл style.css

border: 1px solid #a32503; — это цвет рамки

 border-left: 2px solid #a32503; — цвет левой вертикальной линии, а 2px толщина, можете сделать 3px, будет жирнее и так далее.

box-shadow: 0 0 9px #a32503 inset; —  это цвет внутреннего свечения рамки

font-size: 14px; — размер шрифта

background: #dddddd; — цвет фона

Вызовите палитру цветов и поставьте другое значение. И вид вашего спойлера изменится.

Предлагаю посмотреть видео, чтобы было все понятно.

Пользуйтесь spoiler и ваша статья покажется читателям более профессиональной и грамотной. От этого вы только выиграете в глазах своих читателей. С удовольствием отвечу на ваши вопросы.Podpis