Аккордеон на Zero

<!--Аккордеон-->
<!--https://mt-webdesign.ru/accordion-->
<style>
:root {
/*Пассивное состояние*/
--BGColorPassive: #000; /*цвет фона в пассивном состоянии*/
--BGImgPassive: url(''); /*иконка в пассивном состоянии (если не нужна, оставить поле пустым)*/
--IconsColorPassive: #fff; /*цвет иконки в пасивном состоянии*/
--IconsBorderColorPassive: #000; /*цвет обводки в пассивном состоянии*/
/*По наведению*/
--BGColorHover: #FFFA8C; /*цвет фона по наведению*/
--BGImgHover: url(''); /*иконка по наведению (если не нужна, оставить поле пустым)*/
--IconsColorHover: #000; /*цвет иконки по наведению*/
--IconsBorderColorHover: #FFFA8C; /*цвет обводки по наведению*/
/*Активное состояние*/
--BGColorActive: #FFFA8C; /*цвет фона в активном состоянии*/
--BGImgActive: url(''); /*иконка по наведению (если не нужна, оставить поле пустым)*/
--IconsColorActive: #000; /*цвет иконки в активном состоянии*/
--IconsBorderColorActive: #FFFA8C; /*цвет обводки в активном состоянии*/
/*Общее*/
--IconsBorderRadius: 6px; /*радиус скругления углов у иконки*/
--IconsBorderSize: 1px; /*размер обводки*/
--IconsWidth: 9px; /*ширина иконки (крестик)*/
--IconsHeight: 1px; /*толщина иконки (крестик)*/
--IconsPadding: 10px; /*внутренний отступ*/
}
</style>
<div class="accordion-icon-inside">
<!--Чтобы включить свою иконку, поставить комментарии к элементам ниже (span), но тогда нужно будет указать пути до изображений выше для иконок-->
<span></span>
<span></span>
</div>
<script>
$('.accordion-icon-inside').appendTo('.accordion-icon .tn-atom');
$(document).ready(function () {
// Перечисляем содержимое аккордеонов
var accordionInside = [".uc-accord-1", ".uc-accord-2", ".uc-accord-3"];
for (var i = 0; i < accordionInside.length; i++) {
$(accordionInside[i]).addClass('accordionInside').hide();
}
$('.accordionTrigger').click(function (e) {
e.preventDefault();
$('.accordion-icon').removeClass('accordion-icon-active');
$('.accord-line-inside').removeClass('accord-line-inside-active');
if (!$(this).hasClass("accordionActive")) {
$('.accordionTrigger').removeClass('accordionActive');
$(this).addClass('accordionActive');
var clickedIndex = $('.accordionTrigger').index(this);
$('.accordionInside').slideUp(700);
$(accordionInside[clickedIndex]).slideToggle(500);
// Перечисляем триггеры для аккордеонов (блоки для открытия аккордеонов)
$(this).closest('.uc-accord-link-1, .uc-accord-link-2, .uc-accord-link-3').find('.accordion-icon').addClass('accordion-icon-active');
$(this).closest('.uc-accord-link-1, .uc-accord-link-2, .uc-accord-link-3').find('.accord-line-inside').addClass('accord-line-inside-active');
} else {
$('.accordionTrigger').removeClass('accordionActive');
$('.accordionInside').slideUp(700);
}
});
// Добавляем обработчик события клика на весь документ
$(document).click(function (e) {
var target = e.target;
// Проверяем, если клик был вне .accordionTrigger и .accordionInside
if (!$(target).closest('.accordionTrigger').length && !$(target).closest('.accordionInside').length) {
$('.accordionTrigger').removeClass('accordionActive');
$('.accordionInside').slideUp(700);
$('.accordion-icon').removeClass('accordion-icon-active accordion-icon-hover');
$('.accord-line-inside').removeClass('accord-line-inside-active');
}
});
// Указываем разрешение для ховера, сейчас минимальное 480px
if (window.matchMedia("(min-width: 480px)").matches) {
$('.accordionTrigger').hover(
function () {
// Перечисляем триггеры для аккордеонов (блоки для открытия аккордеонов)
var container = $(this).closest('.uc-accord-link-1, .uc-accord-link-2, .uc-accord-link-3');
container.find('.accordion-icon').addClass('accordion-icon-hover');
},
function () {
// Перечисляем триггеры для аккордеонов (блоки для открытия аккордеонов)
var container = $(this).closest('.uc-accord-link-1, .uc-accord-link-2, .uc-accord-link-3');
container.find('.accordion-icon').removeClass('accordion-icon-hover');
}
);
}
});
</script>
<style>
.accord-line-inside {
transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
opacity: 1;
}
.accord-line-inside-active {
opacity: 0;
}
.accordionTrigger {
cursor: pointer;
}
.accordion-icon-inside {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
.accordion-icon-inside span {
width: var(--IconsWidth);
height: var(--IconsHeight);
background-color: var(--IconsColorPassive);
position: absolute;
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1),
background-image 400ms cubic-bezier(0.77, 0, 0.175, 1),
transform 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.accordion-icon-inside span:nth-child(1) {
transform: rotate(90deg);
}
.accordion-icon-inside span:nth-child(2) {
}
.accordion-icon-inside:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: var(--IconsBorderRadius);
border: var(--IconsBorderSize) solid var(--IconsBorderColorPassive);
background-image: var(--BGImgPassive);
background-size: cover;
background-color: var(--BGColorPassive);
padding: var(--IconsPadding);
position: absolute;
top: 50%;
z-index: -1;
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1),
background-image 400ms cubic-bezier(0.77, 0, 0.175, 1),
border 400ms cubic-bezier(0.77, 0, 0.175, 1);
transform: translate(-50%, -50%);
left: 50%;
}
.accordion-icon-hover .accordion-icon-inside:after {
border: var(--IconsBorderSize) solid var(--IconsBorderColorHover);
background-image: var(--BGImgHover) !important;
background-color: var(--BGColorHover);
}
.accordion-icon-hover .accordion-icon-inside span {
background-color: var(--IconsColorHover);
}
.accordion-icon-active .accordion-icon-inside:after {
border: var(--IconsBorderSize) solid var(--IconsBorderColorActive);
background-image: var(--BGImgActive) !important;
background-color: var(--BGColorActive);
}
.accordion-icon-active span {
background-color: var(--IconsColorActive);
}
.accordion-icon-active span:nth-child(1) {
transform: rotate(0deg);
}
</style>