Спойлер для скрытия длинных текстов
Спойлеры используются как декоративный элемент для скрытия контента. Основная задача — скрывать что-то и при нажатии кнопки показывать это.
Внешний вид спойлера можно обыграть по-разному, но общий смысл в наличии ссылки — заголовка при нажатии на который показывается контент.
Скрипт можно добавить на страницу до места где будет использоваться спойлер либо в раздел head подключаемым файлом.
|
1 |
<script type="text/javascript" src="/js/spoiler.js"></script> |
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script> |
Чтобы спойлер при открытии страницы был в скрытом состоянии нужно в css добавить свойства
|
1 2 |
.spoiler_body {display:none;} .spoiler_links {cursor:pointer; border-bottom: 1px dashed black} |
|
1 2 3 4 5 6 |
<div> <a href="" class="spoiler_links">Заголовок</a> <div class="spoiler_body"> Скрытый текст </div> </div> |
Рассказать: