29 января 2013 г.

Как спрятать текст, картинку под спойлер (spoiler)

Привет друзья! Бывает иногда необходимость прятать текст, картинку или скрипт под спойлер (spoiler), что бы наши статьи выглядели более компактно и привлекательней. Сегодня я покажу Вам несколько примеров, как скрывать объёмные сообщения при помощи спойлера для blogger.

Spoiler - язык программирования HTML, Javascript и т. д. Спойлером называют скрывающийся (или показывающийся) объект (текст, картинка, код и так далее).

Стильный спойлер (spoiler) для Blogger - скрываем текст:

Spoiler:
Lorem Ipsum по русски
Lorem Ipsum боль сидеть Амет, consectetur adipisicing элит, SED сделать eiusmod tempor incididunt ут Labore и др. dolore Magna aliqua. Ut эним объявление миним veniam, quis nostrud упражнение тестовая ссылка ullamco Laboris Ниси-ут aliquip бывший шт commodo consequat. Duis Aute irure боль в reprehenderit в voluptate другую ссылку велит эссе cillum dolore ЕС fugiat Nulla pariatur. Excepteur Синт occaecat cupidatat без proident, sunt в Culpa Квай officia deserunt mollit Anim ID EST laborum.
Lorem Ipsum просто манекен текста печати и верстки промышленности. Lorem Ipsum был стандартный текст манекен в отрасли с тех пор 1500-х годов, когда неизвестный принтер принял камбуз типа и вскарабкался его, чтобы сделать ссылку еще раз с более длинными якорный текст книги типа образца. Он не только успешно пережил пять веков, но и перешагнул в электронный набор, оставаясь практически неизменной. Она стала популярной в 1960-х с тестовыми ссылку выпуск Letraset листов, содержащих проходы Lorem Ipsum, а в последнее время с настольными издателя программного обеспечения, как Aldus PageMaker включая версии Lorem Ipsum.
Теперь попробуем скрыть картинку под спойлер:

Spoiler:
Код:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Здесь Ваш текст, скрипт или картинка

<br>
</div>
</div> 
</div>
Надписи, размер кнопки, размер шрифта надписи, можете заменить на свои. Код ставится в режиме HTML.

Переходим к следующему спойлеру. С помощью сочетанием клавиш (Ctrl+F) Вам надо найти  строку в  шаблоне: </body> Перед этой строчкой - добавьте этот код:

<script language="javascript">

function toggle() {

var ele = document.getElementById("toggleText");

var text = document.getElementById("displayText");

if(ele.style.display == "block") {

ele.style.display = "none";

text.innerHTML = "Открыть спойлер";

}

else {

ele.style.display = "block";

text.innerHTML = "Скрыть текст";

}

}

</script>

Сохраните шаблон, теперь в режиме HTML пользуйтесь этим кодом:

<a href="javascript:toggle();" id="displayText">Открыть спойлер</a>

<div id="toggleText" style="display: none;">Здесь должен быть ваш текст или картинка</div>

Вот пока всё. Всем пока. До новых встреч.



Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

10 коммент. :

  1. ну так-то просто и нормально в общем-то.
    а как :-? сделать, чтобы спойлеров было несколько друг под другом?

    ОтветитьУдалить
    Ответы
    1. Всё так же, вставляете код друг за другом. 8-)

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
    3. Да вот, если бы было всё так просто - я бы не задал вопрос.
      Коды - друг за другом, а работает только первый спойлер.
      (имею ввиду, где "Переходим к следующему спойлеру.", так как множить код первого варианта нерационально)

      Удалить
    4. Но вам же надо, значит рационально.

      Удалить
    5. ну... в общем... логика понятна

      Удалить
    6. Вы же не будете два спойлера делать на каждой странице (первый в списке) блога, а один раз на одной странице нормально. Или вам надо на каждой?

      Удалить
    7. Под спойлер очень удобно прятать например набор новостей за неделю
      Одна страница - на ней 8-10 заголовков. Под заголовками скрытый спойлером текст (я вообще не о блогах речь веду, а об обычной странице любого сайта)
      вообще меня спойлер привлек простотой (без jquery)... но где-то в скрипте нужно указать, что у каждого спойлера будет свой ID.
      К сожалению сам не силен в программировании на java-script поэтому - думал вы что-то подскажете.

      Удалить
  2. Покажите пример на скриншотах тогда будет понятно.

    ОтветитьУдалить
    Ответы
    1. А на кнопки нажать трудно? Вам живой пример не достаточно? 8-)

      Удалить

 
Яндекс.Метрика