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

2013-09-09 | Javascript

Сегодня будет представлено три варианта простых спойлеров для сайта без использования дополнительных плагинов, которые можно установить на сайт с помощью html и JavaScript-кодов.

Но для начала скажу, что такое спойлер.

Спойлер — это модуль, представляющий из себя ссылку, строчку, или картинку, нажав на которую можно увидеть спрятанный под ней контент.

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

Спойлер может пригодиться в том случае, если на странице сайта большой объем информации, часть которого Вы хотите скрыть. Для WordPress есть отдельные плагины для спойлера, например jQuery Collapse-O-Matic.

Итак, начнем.

Первый тип спойлера имеет формат чекбокса и текста, то есть здесь главный элемент — не ссылка, а «птичка», поставив которую откроется скрытое содержимое.

Для такого варианта используйте код:

<style type="text/css">
alt2{ margin: 0px;  padding: 6px;  border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;} // задаем стили
}
</style>
<div class="spoil">
<div class="smallfont">Показать <input type="checkbox" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')&#91;1&#93;.getElementsByTagName('div')&#91;0&#93;.style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')&#91;1&#93;.getElementsByTagName('div')&#91;0&#93;.style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')&#91;1&#93;.getElementsByTagName('div')&#91;0&#93;.style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }"/></div>
<div class="alt2">
<div style="display: none;">
Тут будет текст скрытого контента.
</div>
</div>

Результат:

Показать

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

Для такого варианта используйте код:

<style type="text/css">
alt2{ margin: 0px;  padding: 6px;  border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;} // задаем стили
}
</style>
<div class="spoil">
<input type="button" value="Развернуть" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')&#91;1&#93;.getElementsByTagName('div')&#91;0&#93;.style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')&#91;1&#93;.getElementsByTagName('div')&#91;0&#93;.style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')&#91;1&#93;.getElementsByTagName('div')&#91;0&#93;.style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }"/>
</div>
<div class="alt2">
<div style="display: none;">
Тут будет текст скрытого контента.
</div>
</div>

Посмотреть результат.

И последний на сегодня вариант (самый красивый) — спойлер с использованием jQuery-библиотеки Google.

Здесь мы будем подключать данную библиотеку, используя код

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Далее вставляем этот код:

<script type="text/javascript">

        $(document).ready(function(){
            $('.splLink').click(function(){
            $(this).parent().children('div.splCont').toggle('normal');
            return false;
            });
        });
</script>

Далее делаем ссылку на открытие/скрытие спрятанного контента и сам скрытый контент.
Полностью код выглядит следующим образом:

<style type="text/css">
.splCont {display:none; padding:3px 5px;}
a {text-decoration:none; color:black;} // задаем стили
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

        $(document).ready(function(){
            $('.splLink').click(function(){
            $(this).parent().children('div.splCont').toggle('normal');
            return false;
            });
        });
</script>
<a href="javascript://" class="splLink">
<strong>Показать:</strong></a>
<div class="splCont">
Тут будет текст скрытого контента.
</div>
</div>

Посмотреть результат.

Мы рассмотрели три варианта простых спойлеров для сайта. Можете использовать любой из них по своему вкусу.

Поделиться:

Записи по теме:

6 комментариев к записи "Спойлер для сайта"

Ольга от 10.09.2013 в 13:31 пишет:

Отличные, простые решения. Спасибо!

Ответить ↓
- Никита от 11.09.2013 в 11:47 пишет:
  
  Всегда пожалуйста, Ольга! Заходите еще!
  
  Ответить ↓
Руслан от 12.09.2013 в 09:25 пишет:

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

Ответить ↓
Александр от 07.02.2014 в 08:10 пишет:

А я через плагин сделал…Не получилось у меня…Что-то сделал не так и админка накрылась =) Даже с восстановленным файлом не захотела работать, пришлось за последний бэкап восстанавливать =(

Ответить ↓
- Никита от 07.02.2014 в 14:57 пишет:
  
  Как это админка накрылась? Для таких спойлеров не надо править php-код. Достаточно прописать его в самой записи/на странице.
  
  Ответить ↓
Евгений от 10.04.2015 в 20:10 пишет:

Спасибо,у меня было огромное меню-пришлось даже разбить на 3 части,а теперь спрятал в спойлер и все ОК

Ответить ↓