Спойлер для сайту
В процесі проб, я встановив, що даний код працює без проблем на сайтах написаних на звичайному html, CMS Satus і WordPress. Але, практично впевнений, що і на інших двигунах все буде працювати відмінно. Отже приступимо!
По-перше, що таке спойлер? Розповімо для непосвячених. Спойлер - така конструкція, яка зберігає в собі контент сайту, спочатку прихований для користувача. Однак він відкритий для пошукових систем, не робить негативного впливу на ранжування сайту в пошукових системах. При кліці по посиланню розкривається прихований контент.
Для чого це робиться? Взагалі для краси ... Наприклад, дизайн сайту не передбачає розміщення великого тексту на головній сторінці сайту, але при цьому ця сторінка буде просуватися в пошукових системах. А для просування серйозних запитів, як відомо, необхідний досить об'ємний текст, для кращого ранжирування.
Розповідати про спойлерах можна ще довго, але, як то кажуть, краще один раз побачити, ніж сто разів почути. Дивимося приклад спойлера нижче.
Приклад спойлера. Натисніть на посилання ...
Тут знаходиться текст, зображення або інший контент.
Поїхали. Код, представлений нижче, необхідно розмістити між тегами
, якщо спойлер буде використовуватися на декількох сторінках сайту. Якщо ж ні, то досить просто вставити його в тіло сторінки де буде розміщений спойлер (як зроблено у мене на цій сторінці). Отже, код:А заголовок і тіло спойлера розміщується в наступному коді:
В принципі, вже все працює, проте не зовсім так, як треба б. Якщо ви просто вставите коди, представлені вище, то вміст спойлера відразу буде відкритим. Щоб позбавиться від цього «недуги» необхідно в css (каскадна таблиця стилів) додати наступне:
div.spoiler div.text display: none;
>
Ну в принципі все готово! Якщо ви все зробили так, як тут написано, спойлер буде працювати без проблем. Якщо виникли проблеми, пишіть!
Всі необхідні параметри стилів, прописуємо ось тут:
div.spoiler div.name // стилі для заголовка
div.spoiler div.text // стилі для основного контенту
Готово! Беремо на замітку!
Треба трохи змінити скрипт і додати кілька правил в css.
Ось змінений скрипт:
$ (Document) .ready (function () $ ( "div.spoiler div.name span"). Toggle (function () $ (this) .parent ( "div.name"). Parent ( "div.spoiler") .children ( "div.text"). show ();
$ (This) .parent ( "div.name"). Css ( "backgroundPosition", "0 0");
>, Function () $ (this) .parent ( "div.name"). Parent ( "div.spoiler"). Children ( "div.text"). Hide ();
$ (This) .parent ( "div.name"). Css ( "backgroundPosition", "0 -27px");
>);
>);
А ось css:
.spoiler padding-left: 20px;
>
div.spoiler div.name height: 27px;
cursor: pointer;
text-decoration: underline;
color: # 003399;
background: url ( "../ images / spoiler.jpg") no-repeat 0 -27px;
padding-left: 25px;
>
div.spoiler div.text display: none;
padding: 10px 10px 0px 25px;
>
Для файлу spoiler.jpg правильно вказати шлях, у мене це спрайт розміром 12х54, від цього і -27px в коді, на зображенні мінус зверху, плюс знизу.
«Всі необхідні параметри стилів, прописуємо ось тут:
div.spoiler div.name // стилі для заголовка
div.spoiler div.text // стилі для основного контенту »
я не можу зрозуміти, куди саме це прописувати? Так само не зрозумів, куди прописувати фразу, при якій спойлер за замовчуванням закритий?
Код той же що Ви давали.
$ (Document) .ready (function () $ ( «div.spoiler div.name span»). Toggle (function () $ (this) .parent ( «div.name»). Parent ( «div.spoiler») .children ( «div.text»). show ();
$ (This) .parent ( «div.name»). Parent ( «div.spoiler»). Css ( «backgroundPosition», »-15px 0");
>, Function () $ (this) .parent ( «div.name»). Parent ( «div.spoiler»). Children ( «div.text»). Hide ();
$ (This) .parent ( «div.name»). Parent ( «div.spoiler»). Css ( «backgroundPosition», »0 -15px»);
>);
>);
Ось так я його використовую.
(Франція) - Pernod / Перно
Пляшка 0,7 л. 2800 руб. Порція 50 мл. 200 руб.
Ось так про пісивая в CSS потрібний мені клас:
div.spoiler div.opisanie
і не працює він.
Як оголосити в скрипті?
Я так розумію, що у вас текст спойлера укладений в div сласса «opisanie»? Якщо так, тоді в скрипті змініть ось це: div.text на ось це: div.opisanie
Дякую за споллер. тільки він у мене не на странаце а в блоці і виглядає не оч ((
Може його варто стилями трохи порівнялися, щоб красиво було?
Спасибі, заощадила купу часу - самостійно рішення шукала б дуже довго)) все працює відмінно)
Дякую за спойлер! Те що потрібно. Все працює.
Тільки підкажіть як зробити, щоб він закривався не тільки при кліці по заголовку спойлера, а при кліці в будь-якому місці сторінки крім спойлера.
Плюс ще б хотілося, щоб при кліці на інший спойлер (у мене їх декілька на сторінці), інший, якщо відкритий, - закривався.
$ ( "Div.spoiler div.name span"). Toggle (function ()
поміняй тут span на div
Приклад спойлера. Натисніть на посилання ...
і тут.
Також задай йому відповідні параметри width і height. Наприклад, 100% і 40px