СКРЫТЬ ИНФОРМАЦИЮ (текст, картинку, видео, презентацию, интерактивные упражнения, тесты и пр.)

Чтобы не загружать блог новыми страницами и не использовать ссылки на Google Диск, можно воспользоваться спойлером.

Следующее описание, добавления спойлера на страницу, взяла из этого источника: http://www.mycrib.ru/2014/08/text-pod-spoiler.html

В том месте, где необходимо спрятать информацию, вставьте в режиме html следующий код:
<div id="spoiler" style="display:none">
Скрытая информация
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Показать/Скрыть</button>


ПРИМЕР:


Если на страницу будет добавляться еще один или несколько спойлеров, тогда в коде (который описан выше) необходимо расставить 4 цифры "1":
<div id="spoiler1" style="display:none"> 
Скрытая информация
 </div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler
1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}">Показать/Скрыть</button>

на следующий спойлер 4 цифры "2" и т.д.:
<div id="spoiler2" style="display:none"> 
Скрытая информация
 </div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler
2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Показать/Скрыть</button>

ПРИМЕЧАНИЕ:
Если необходимо изменить размер встраиваемого контента (видео, рисунок, презентация), то необходимо добавить в код width="680" height="300" (задать нужные размеры ширины и высоты).



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

  1. Надежда Васильевна, спасибо вам за ваш труд!Много полезного и интересного для себя открыла и применила.

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