Это спойлер для сайта с плавным открытием и закрытием очень прост в установке и без проблем установился на WordPress. Думаю, что и с другими движками проблем на будет.
Выглядит он эффектнее чем простой спойлер.
Выглядит он так:
например картинка
Установка плавный спойлер для сайта
Для работы спойлера на сайте должен быть установлен Jquery. Обычно, по умолчанию, он уже установлен. Но если его нет, между тегами <head> и </head> нужно добавить:
1 | <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
HTML спойлера
HTML очень простой.
1 2 3 4 5 6 | <div> <a href="" class="spoiler_links">НАЖМИ</a> <div class="spoiler_body"> Тут может быть любой HTML </div> </div> |
Для работы спойлера этот HTML изменять нельзя, так как в скрипте будет использоваться parentNode и при изменении структуры HTML спойлер просто не будет работать.
JS
А вот собственно и Javascript. Этот скрипт нужно разместить перед спойлером. Если спойлеров на странице несколько, его нужно разместить перед самым первым.
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> jQuery(document).ready(function($) { $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); }); </script> |
CSS
Чтобы спрятать все спойлеры при начальной загрузке страницы, применяются CSS стили:
1 2 | .spoiler_body {display:none;} .spoiler_links {cursor:pointer;} |
Не плохо. А как сделать чтобы вместо кнопки был обычный текст?
Убрать со ссылки
class=”spoiler_links”
В итоге будет