четверг, апреля 28, 2011

Как создать спойлер для скрытия отдельных фрагментов сообщения блога

Иногда возникает необходимость скрыть определенный фрагмент текста с возможностью развернуть его – такой прием обычно называется спойлером.
Под спойлер можно “спрятать” то, что не должно быть явным и бросаться в глаза с первого взгляда. Например, если вы пишете свой отзыв о фильме, вы можете оградить читателей от разочарования, скрыв разгадку в спойлер (кто убил дворецкого). Кто захочет – прочитает, но кто-то предпочтёт оставаться в неведении.

В сети есть несколько вариантов внедрения спойлера в блог на основе Blogger, но самый простой и не нуждающийся в редактировании шаблона я нашла на блоге Ciudad Blogger .

Вот как это выглядит:
Под спойлер можно спрятать и таблицы, и изображения, и даже видео.
Для того, чтобы применить спойлер, нужно в редакторе постов в режиме HTML  вставить такой код и заменить “ Текст, который нужно спрятать под спойлер “ на тот фрагмент вашего сообщения, который требуется скрыть.  
<div class="divspoiler"> <input onclick="if (this.parentNode.nextSibling.childNodes[0].style.display
            != '') { this.parentNode.nextSibling.childNodes[0].style.display = '';
            this.value = 'Закрыть спойлер'; } else { this.parentNode.nextSibling.childNodes[0].style.display
            = 'none'; this.value = 'Открыть спойлер'; }" type="button" value="Открыть
            спойлер" /></div> <div> <div class="spoiler" style="display:
            none;">
                             Текст, который нужно спрятать под спойлер
                         </div> </div>
        
Если вам не нравится традиционный вид кнопки, в этой заметке вы сможете прочитать, как настроить фон, цвет и рамку кнопки. 

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

<div class="divspoiler"> <a href="javascript:void(0);" onclick="if
        (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display
        = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display
        = 'none';}" >Показать / Скрыть &#9660;&#9650;</a> </div><div><div
        class="spoiler" style="display: none;"> Текст, который необходимо скрыть
        </div></div>
    

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

<div class="divspoiler"> <img src="URL изображения" onclick="if
        (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display
        = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display
        = 'none';}" /> </div><div><div class="spoiler" style="display:
        none;"> Текст, который необходимо скрыть </div></div>
    

Не правда ли, все довольно просто?

Важное примечание:

При создании сообщения, обратите внимание на "Настройки сообщения". В опции "Изменить разрывы строк в HTML коде" нужно поставить галочку на первом пункте:

1 комментарий:

  1. IE9 пожаловался на заблокированные элементы activex при работе с кнопкой, разрешил заработала. Хотя фф и хром всё равно отказываются работать с кнопкой, хотя в вашем посте всё ок

    ОтветитьУдалить

Web Analytics