Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать фон при наведении в аккордеоне в Tilda

Как сделать фон при наведении в аккордеоне в Tilda

1
Создали блок TX16N и задали ему класс uc-accord-bg
2
Для описания задали в типографике цвет белый
3
Добавили код в блок Другое - Т123
Библиотека для примера
<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>
Made on
Tilda