• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Простой открывающийся спойлер HTML и JS (Собственный спойлер с плавным открытием и скрытием)
Простой открывающийся спойлер HTML и JS
Kosten
Среда, 15 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Вашему вниманию оригинальный и в тоже время простой скрипт для создания спойлера, который станет по умолчанию скрывать, по при нажатие открываться. Также полевую сторону установлены знаки, как плюс и минус, что соответствует формаций открытие, где идет под минус, что больше сделано для виденье.



HTML

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

<a href="#" class="vukoscam-kugunkanop"><span>Развернуть спойлер</span></a>
<div class="loxagtunsa-makanop">Скрытый контент спойлера <br>
<img src="http://krasivie-kartinki.ru/images/skazki48.gif" border="0" alt="">
  
</div>

CSS


JS

Код
$(document).on('click','.vukoscam-kugunkanop',function(e){e.preventDefault();$(this).toggleClass('active');$(this).parent().find('.loxagtunsa-makanop').slideToggle(300);})

Демонстрация
Прикрепления: zanuv.zip (2.1 Kb) · 4811761.png (1.5 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Простой открывающийся спойлер HTML и JS (Собственный спойлер с плавным открытием и скрытием)
  • Страница 1 из 1
  • 1
Поиск: