CSS

Как сделать спойлер в html с помощью JS?

Опубликовано
Комментарии Нет

Если честно, то я перепробовал очень много 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, но не сильно критично я думаю. Да и не всегда это проявляется.

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

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





← Старые Новые →