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

<!--Аккордеон-->
<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>
</div>
<script>
$('.accordion-icon-inside').appendTo('.accordion-icon .tn-atom');
$(document).ready(function () {
$('.uc-accordion-content').each(function () {
$(this).addClass('accordionInside').css({
height: $(this).height(),
overflow: 'hidden',
transition: 'height 300ms ease'
}).height(0);
});
$('.accordionTrigger').click(function (e) {
e.preventDefault();
$('.accordion-icon').removeClass('accordion-icon-active');
$('.accord-line-inside').removeClass('accord-line-inside-active');
var content = $(this).closest('.uc-accord-link').next('.uc-accordion-content');
if (!$(this).hasClass("accordionActive")) {
$('.accordionTrigger').removeClass('accordionActive');
$('.accordionInside').height(0); 
content.height('auto');
var targetHeight = content.prop('scrollHeight');
content.height(0).animate({ height: targetHeight }, 300); 
$(this).addClass('accordionActive');
$(this).closest('.uc-accord-link').find('.accordion-icon').addClass('accordion-icon-active');
$(this).closest('.uc-accord-link').find('.accord-line-inside').addClass('accord-line-inside-active');
} else {
$(this).removeClass('accordionActive');
content.animate({ height: 0 }, 300); 
}
});
if (window.matchMedia("(min-width: 480px)").matches) {
$('.accordionTrigger').hover(
function () {
$(this).closest('.uc-accord-link').find('.accordion-icon').addClass('accordion-icon-hover');
},
function () {
$(this).closest('.uc-accord-link').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;
transition-delay: 0s;
}
.accord-line-inside-active {
opacity: 0;
transition-delay: 0.7s;
height: 150% !important;
}
.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 300ms cubic-bezier(0.77, 0, 0.175, 1),
background-image 300ms cubic-bezier(0.77, 0, 0.175, 1),
transform 300ms 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>