Всем приветы и ответы!
И сегодня мы будем с вами создавать спойлер html на сайте, благодаря JS и не только!
Благодаря ему вы можете спрятать нужную информацию с глаз долой, а посетитель нажав на кнопку откроет и посмотрит её!
Давайте приступим!
Установим JS
Во-первых, необходимо в шапку сайта перед закрывающим тегом </head> установить библиотеку jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Во-вторых, в самый низ сайта, перед закрывающим тегом </body> пропишем вот такой JS скрипт:
<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 код:
<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 вот такой код:
.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;
}
Он будет отвечать за стилизацию кнопки Свернуть Развернуть!
На этом у меня всё! Удачных решений!
То, что доктор прописал, заберу себе, цвет кнопки поменяю и решение готово.