Веб-Денис
Помогаем создавать лучшее
  • Ответы WP
  • HTML-CSS
  • Фон сайта
  • Блог DM
Главная › HTML-CSS › Кнопки

Спойлер HTML код на сайт

Пример спойлера на сайт HTML
2022-05-20
Автор: неизвестно
Demo

Всем приветы и ответы!

И сегодня мы будем с вами создавать спойлер html на сайте, благодаря JS и не только!

Благодаря ему вы можете спрятать нужную информацию с глаз долой, а посетитель нажав на кнопку откроет и посмотрит её!

Давайте приступим!

Установим JS

Во-первых, необходимо в шапку сайта перед закрывающим тегом </head> установить библиотеку jquery:

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Во-вторых, в самый низ сайта, перед закрывающим тегом </body> пропишем вот такой JS скрипт:

CSS

<script>
(function($){
$(document).ready(function() {
$('.cell-spoiler-button').click(function() {
$(this).parent().parent().find('.cell-spoiler-content').slideToggle('slow');
if($(this).text() == 'Закрыть'){
$(this).text('Открыть');
} else {
$(this).text('Закрыть');
} });
});
})(jQuery);
</script>

HTML код

Теперь в нужное место на сайте, на страницах с текстом пропишем вот такой HTML код:

HTML

<div class="cell-spoiler">
<div class="spoiler-info">
<a href="javascript:void(0)" class="cell-spoiler-button ">Открыть</a>
<div style="clear: both;"></div>
</div>
<div class="cell-spoiler-content" style="display: none;">
<p>тут спрятанный текст ура</p>
</div>
</div>

CSS стили

И теперь в заключении, надо прописать в файле под названием style.css вот такой код:

CSS

.cell-spoiler {
margin: 0;
padding:0;
}
.spoiler-info {
width:100%;
}
.cell-spoiler-button {
padding:10px 15px;
margin-bottom: 10px;
background: #9fd478;
display: inline-block;
border-radius:10px;
color:#282c24!important;
text-decoration:none!important;
}
.cell-spoiler-button:hover {
background:#82b85b;
}

Он будет отвечать за стилизацию кнопки Свернуть Развернуть!

На этом у меня всё! Удачных решений!

С уважением, Денис Мехедов
1 Комментарий
  1. Николай Васильевич
    21.05.2022 в 14:33
    #1

    То, что доктор прописал, заберу себе, цвет кнопки поменяю и решение готово.

    Ответить
Отменить ответ
Автор Денис Мехедов
Привет!

Я Денис Мехедов.

Я верстаю HTML-CSS:

Решений - 14
  • Горизонтальное меню 1
  • Картинки 1
  • Кнопки 2
  • Облако тегов 3
  • Подсказки 1
  • Поля 1
  • Списки 1
  • Статистика 1
  • Табы 1
  • Цитаты 2

  • О проекте
  • Автор
  • Контакты
  • Комментарии
  • © Web-Denis 2022
  • Дизайн © ДМ
  • Хостинг Timeweb
При копировании материалов, ссылка на сайт обязательна.
Политика конфиденциальности
Мы cохраняем файлы cookie.