Спойлер для сайта

Спойлер для сайта. Как сделать спойлер на сайте?

Сегодняшняя статья будет первой в разделе, под названием «Веб-разработка». Решил сделать его отдельно, чтобы размещать в нем материалы, относящиеся не только к WordPress.

Недавно возник вопрос, как сделать спойлер для сайта, который работает на любой CMS или написан на простом, родном, так сказать, html. А если переходить к частностям, то волновала интеграция спойлера в CMS Satus.

В процессе проб, я установил, что данный код работает без проблем на сайтах написанных на обычном html, CMS Satus и WordPress. Но, практически уверен, что и на других движках всё будет работать отлично. Итак приступим!

Во-первых, что такое спойлер? Расскажем для непосвященных. Спойлер — такая конструкция, которая хранит в себе контент сайта, первоначально скрытый для пользователя. Однако он открыт для поисковиков, не оказывает негативного влияния на ранжирование сайта в поисковых системах. При клике по ссылке раскрывается скрытый контент.

Для чего это делается? Вообще для красоты… Например, дизайн сайта не предполагает размещение большого текста на главной странице сайта, но при этом эта страница будет продвигаться в поисковых системах. А для продвижения серьезных запросов, как известно, необходим достаточно объёмный текст, для лучшего ранжирования.

Рассказывать о спойлерах можно еще долго, но, как говорится, лучше один раз увидеть, чем сто раз услышать. Смотрим пример спойлера ниже.

Пример спойлера. Нажмите на ссылку…
Здесь находится текст, изображения или прочий контент.

 

А теперь во-вторых, как сделать спойлер для сайта, а точнее как разместить его на сайте? В принципе, все предельно просто. Читаем внимательно, делаем всё как написано здесь и всё будет хорошо. Если вдруг будут проблемы — пишите в комменты.

Поехали. Код, представленный ниже, необходимо разместить между тегами <head></head>, если спойлер будет использоваться на нескольких страницах сайта. Если же нет, то достаточно просто вставить его в тело страницы где будет размещен спойлер (как сделано у меня на этой странице). Итак, код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(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");
});
});
</script>

А заголовок и тело спойлера размещается в следующем коде:

<div class= "spoiler">
<div class= "name"><span>Пример спойлера. Нажмите на ссылку…</span></div>
<div class= "text">Здесь находится текст, изображения или прочий контент.</div>
</div>

В принципе, уже все работает, однако не совсем так, как надо бы. Если вы просто вставите коды, представленные выше, то содержимое спойлера сразу будет открытым. Чтобы избавится от этого «недуга» необходимо в css (каскадная таблица стилей) добавить следующее:

div.spoiler div.text {
display: none;
}

Ну в принципе всё готово! Если вы всё сделали так, как здесь написано, спойлер будет работать без проблем. Если возникли проблемы, пишите!

Все необходимые параметры стилей, прописываем вот здесь:

div.spoiler div.name {список стилей;} //стили для заголовка
div.spoiler div.text {список стилей;} //стили для основного контента

Готово! Берем на заметку!

Запись опубликована в рубрике Веб-разработка. Добавьте в закладки постоянную ссылку.

53 комментария: Спойлер для сайта

  1. Тоже решила сделать спойлер на своем сайте. Надеюсь, что все получится.

  2. Замир говорит:

    Как свернуть/развернуть сразу все спойлеры подряд на странице?

  3. Замир говорит:

    Добрый день. Воспользовался этим кодом. Сделал несколько спойлеров подряд.
    Появилась потребность в кнопке, которая разворачивала бы и обратно сворачивала бы все спойлера на странице. Помогите, пожалуйста.

  4. Паша Цветомузыка говорит:

    а без гуглберга и js моск не способен реализовать спойлер?

  5. Alex говорит:

    Спасибо, работает.

    Вопросы вот такие возникли:
    1. Как сделать два и больше спойлеров на одной странице?
    Можно ли не прописывать показываемый текст, а подключать его,
    например этот текст прописан в другом файле html, или даже в файле .doc?

    Очень был бы благодарен за ответы.

  6. Григорий говорит:

    Здравствуйте!
    Подскажите, пожалуйста, как сделать, чтобы при клике на другой спойлер (у меня их несколько на странице в один ряд), другой, если открыт, — закрывался.
    Буду очень признателен!!!

    Ваша статья: http://mrwildwolf666.name/veb-razrabotka/spojler-dlya-sajta/

  7. SG MP3 говорит:

    It’s work Waao

    THANK YOU

  8. Владимир говорит:

    Здравствуйте!
    Подскажите как подправить код, чтобы работало несколько спойлеров на странице?
    А то все одновременно и открываются и закрываются

  9. Эрнест говорит:

    Спасибо все отлично работает, НО курсор не меняется на «руку», не подскажите как это исправить?

  10. Виталий говорит:

    Спасибо! Пригодилось!

  11. Михаил говорит:

    Работает, спасибо!

  12. Vera говорит:

    Спасибо огромное за спойлер! Я в этом вообще не разбираюсь, но благодаря вашим инструкциям быстро все настроила.
    Спасибо, удачи вам 🙂

  13. Виктор говорит:

    Спасибо за скрипт! Отлично работает.
    Но у меня один вопрос: как прикрутить к закрытому «+», а к открытому «-» сбоку?

    • Aleksey говорит:

      Нужно немного изменить скрипт и добавить несколько правил в 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 в коде, на картинке минус сверху, плюс снизу.

  14. Andrey говорит:

    «Все необходимые параметры стилей, прописываем вот здесь:

    div.spoiler div.name {список стилей;} //стили для заголовка
    div.spoiler div.text {список стилей;} //стили для основного контента»

    я не могу понять, куда именно это прописывать? Так же не понял, куда прописывать фразу, при которой спойлер по умолчанию закрыт?

  15. Максим говорит:

    А как сделать чтобы он был изначально закрытым?
    А то я обновляю страницу и становиться видна информация- хочу ее скрыть спойлером.

  16. Роман говорит:

    плавно както можно этот спойлер сделать? заранее спасибо!

  17. Роман говорит:

    Спасибо Огромное! все работает!)) подскажете, а можно сделать чтоб спойлер открывался плавно, списибо!)))

  18. re.sens говорит:

    нет, пример кода подъелся при отправке (
    Конструкция чуть другая. class=»opisanie» это не вкладка сполера и не титл а строка между ними. То-есть всё остальное остается на своих местах. И div.spoiler div.name и div.spoiler div.text а ещё появляется opisanie просто строка не участвующая в скрипте, не ссылка и не спрятанный текст. Просто строка между ними.

  19. re.sens говорит:

    Спасибо! Весь день парился, чтоб прикрутить нормальный сполер к Jooma.
    Этот подходит практически идеально! У всех просмотренных ранние вариантов не было возможности вставлять HTML и CSS в title сполера.
    Есть странная проблема:
    у меня между титолом и контентом сполера есть ещё одна строка в теги див. Я добавляю её класс в css по аналогии с двумя предыдущими, но это не работает!
    В чем может быть дело?

    • MrWildWolf666 говорит:

      Вероятно, вам необходимо его прописать в скрипт.

      • re.sens говорит:

        Можно подробнее? Не имел дело со скриптами =(

        • MrWildWolf666 говорит:

          Необходимо посмотреть на код и узнать, что хотите сделать.

          • re.sens говорит:

            Код тот же что Вы давали.

            $(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
            и не работает он.
            Как объявить в скрипте?

          • MrWildWolf666 говорит:

            Я так понимаю, что у вас текст спойлера заключен в div сласса «opisanie»? Если так, тогда в скрипте измените вот это: div.text на вот это: div.opisanie

  20. Роман говорит:

    Спасибо за споллер!!! только он у меня не на странаце а в блоке и смотрится не оч ((

  21. PaLinkaPro говорит:

    Спасибо, сэкономила кучу времени — самостоятельно решение искала бы очень долго)) все работает отлично)

  22. Сергей говорит:

    Спасибо за спойлер! То что нужно. Все работает.
    Только подскажите как сделать, чтобы он закрывался не только при клике по заголовку спойлера, а при клике в любом месте страницы помимо спойлера.
    Плюс еще бы хотелось, чтобы при клике на другой спойлер (у меня их несколько на странице), другой, если открыт, — закрывался.

  23. Александр говорит:

    А если разместить несколько спойлеров на одну страницу html, не будет проблем? Например, я устанавливал примерно такой спойлер, так после открытия одного, открывались все..

  24. astroHABT говорит:

    Спасибо! Работает всё на ура! только хотел бы узнать, как пределать, чтобы не текст был шапкой спойлера, а кнопка? к примеру Подробнее ??

  25. Роман говорит:

    Здравствуйте.
    Еле нашел устраивающий меня спойлер. Но только не пойму, почему когда я навожу на спойлер, не появляется значек с изображением руки? Курсор принимает вид, как будто я просто хочу выделить текст.
    Подскажите пожалуйста в чем может быть проблема.

  26. сергей говорит:

    прочёл и обрадовался, что всё описано очень доходчиво. именно это я и искал на данный момент. скопировал текст и положил перед носом, начал вписывать код в своё приложение и осёкся: оказалось не так просто как на первый взгляд. стал разбираться подробнее, разложил всё по полочкам, но должного результата так и не добился. всё правильно, всё так, но спойлера у меня нет, да впрочем и содержимое этого спойлера не отображается.
    так это я такой тупой получается?
    хотелось бы посмотреть практтическое описание кода простейшей страницы для более внятного разумения, так сказать шаблон.

  27. XRays говорит:

    Спасибо, всё работает =)

Добавить комментарий