Если честно, то я перепробовал очень много html-реализаций различных спойлеров, но не один полностью не устроил. Я не являюсь каким-то привередой, но если нельзя разместить несколько спойлеров на одной web-странице, то это является плохим кодом.
Для себя я нашел настоящий Грааль, который отлично вписывается в любой дизайн и не нагружает браузер.
Как выглядит спойлер в html?
В самом начале моего очередного монолога хотелось бы привести пример, того что получится в итоге. Получится вот так:
See the Pen Табы jquery by Ванька (@itshaman) on CodePen.
Мой способ спойлера на HTML+JS
Первым делом подключаем используемую библиотеку jQuery и еще JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между <head>…</head>
Сам код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>Добавляем в CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт:
.splCont {
display: none;
padding: 3px 5px;
}Если у Вас нет CSS-файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера):
<style type="text/css">
.splCont {
display: none;
padding: 3px 5px;
}
</style>Далее размещаем между тегами <body>…</body> в любом месте код самого спойлера. Для моего примера это код такой:
<a href="javscript://" class="splLink">Спойлер: пример</a>
<div class="splCont">
<div>Это примерный текст!</div>
</div>Заметил только небольшое дерганье при использовании Google Chrome, но не сильно критично я думаю. Да и не всегда это проявляется.
Комментарии
Нет комментариев к данной статье.
Комментарии