<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
const t585Elements = document.querySelectorAll('.uc-accord-bg .t585');
t585Elements.forEach(t585 => {
const accordions = t585.querySelectorAll('.t585__accordion');
accordions.forEach(accordion => {
const bgblkDiv = document.createElement('div');
bgblkDiv.className = 'bg_block';
accordion.appendChild(bgblkDiv);
});
const tCols = t585.querySelectorAll('.t-col');
tCols.forEach(tCol => {
tCol.addEventListener('click', function() {
tCols.forEach(col => col.classList.remove('open-accord'));
this.classList.add('open-accord');
});
});
});
document.addEventListener('click', function(event) {
let clickedInsideT585 = false;
t585Elements.forEach(t585 => {
if (t585.contains(event.target)) {
clickedInsideT585 = true;
}
});
if (!clickedInsideT585) {
t585Elements.forEach(t585 => {
const openAElements = t585.querySelectorAll('.open-accord');
openAElements.forEach(openAElement => {
if (!openAElement.querySelector('.t585__opened')) {
openAElement.classList.remove('open-accord');
}
});
});
}
});
})();
});
</script>
<style>
.uc-accord-bg .t585__accordion {
position: relative;
overflow: hidden;
}
.uc-accord-bg .t585__wrapper>div {
position: relative;
z-index: 1;
}
.uc-accord-bg .t585 .t-col ,
.uc-accord-bg .bg_block ,
.uc-accord-bg .t585__title ,
.uc-accord-bg svg g {
transition: all 0.3s cubic-bezier(0.1, 0.3, 0.2, 0.5) 0.2s;
}
.uc-accord-bg .t585 .t-col:hover .bg_block ,
.uc-accord-bg .open-accord .bg_block {
top:0%;
}
.uc-accord-bg .t585__circle {
background-color: transparent !important;
}
.uc-accord-bg .t585 .t-col:hover svg g,
.uc-accord-bg .open-accord svg g {
stroke:#fff !important;
}
.uc-accord-bg .t585 .t-col:hover .t585__title ,
.uc-accord-bg .open-accord .t585__title {
color: #fff !important;
}
.uc-accord-bg .bg_block {
position: absolute;
top: 100%;
width: 100%;
height: 100%;
background-color: #121820;
z-index: 0;
}
.uc-accord-bg .t585__textwrapper ,
.uc-accord-bg .t585__title {
padding-left: 15px;
}
.uc-accord-bg .t585__textwrapper {
opacity:0;
transform: translateY(100%);
transition: all 0.5s ease-in-out;
}
.uc-accord-bg .open-accord .t585__textwrapper {
transform: translateY(0);
opacity:1;
}
</style>