Пример того, как быстро сделать спойлер, который отображается только на "больших экранах", а на мобильном телефоне сразу показывает свое содержимое.
Простенький спойлер на JavaScript
21.03.2022
В закрытом виде, выглядит как ссылка:
А в раскрытом видно содержимое и кнопку закрытия / сворачивания:
CSS
.so_spoiler_trigger,
.so_spoiler_close
{
display: none;
}
@media (min-width: 767px) {
.so_spoiler {
}
.so_spoiler_trigger {
display: block;
cursor: pointer;
color: #349bb8;
transition: all 0.5s ease 0s;
}
.so_spoiler_trigger:hover {
color: #32c272;
}
.so_spoiler_close {
cursor: pointer;
color: #349bb8;
transition: all 0.5s ease 0s;
text-align: right;
}
.so_spoiler_close i {
padding-right: 20px;
color: red;
}
.so_spoiler_body,
.opened .so_spoiler_trigger
{
display: none;
}
.opened .so_spoiler_body,
.opened .so_spoiler_close
{
display: block;
}
}
JavaScript
$('.so_spoiler_trigger').on('click', function (event) {
event.preventDefault();
$(this).parent().addClass("opened");
});
$('.so_spoiler_close').on('click', function (event) {
event.preventDefault();
$(this).parent().removeClass("opened");
});
HTML
<div class="so_spoiler">
<div class="so_spoiler_trigger">Подробная информация</div>
<div class="so_spoiler_close"><i class="fal fa-times-circle"></i></div>
<div class="so_spoiler_body">
<div class="so_product_shop__address">
<i class="fas fa-map-marker"></i>Текст - текст - текст
</div>
<div class="so_product_shop__address">
пн-сб: 10.00 - 20.00 вск: 10.00 - 19.00
</div>
</div>
</div>