Как исправить анимацию 2 блоков ⇐ CSS

[Гость]

У меня есть этот HTML-код:

ОРМ 1

1

1

1

SERM

1

1
ОРМ
1

1

1

1

SERM

1

1
ОРМ
1

1

1

1

SERM

1

1
SMM 1 1
JS-код:

функция непрозрачности(){ document.getElementById("изменение-h2-first").onclick(function(){ setTimeout(функция () { document.getElementById('opacity-first').className = 'anim-opacity-enable'; },200) document.getElementById("изменение-h2-first").className = "anim-blue"; if(document.getElementById("opacity-секунда").style.display === "flex") { document.getElementById("непрозрачность-секунда").className = 'anim-opacity-disable' } else if(document.getElementById("opacity- Third").style.display === "flex") { document.getElementById("непрозрачность-третий").className = 'anim-opacity-disable' } }) document.getElementById("изменение-h2-секунда").onclick(function (){ setTimeout(функция () { document.getElementById('непрозрачность-секунда').className = 'anim-opacity-enable'; },200) document.getElementById("изменение-h2-секунда").className = "anim-blue"; if(document.getElementById("opacity-first").style.display === "flex") { document.getElementById("opacity-first").className = 'anim-opacity-disable' } else if(document.getElementById("opacity- Third").style.display === "flex") { document.getElementById("непрозрачность-третий").className = 'anim-opacity-disable' } }) document.getElementById("изменение-h2-третий").onclick(function (){ setTimeout(функция () { document.getElementById('непрозрачность-третий').className = 'anim-opacity-enable'; },200) document.getElementById("изменение-h2-третий").className = "anim-blue"; if(document.getElementById("opacity-first").style.display === "flex") { document.getElementById("opacity-first").className = 'anim-opacity-disable' } else if(document.getElementById("opacity-секунда").style.display === "flex") { document.getElementById("непрозрачность-секунда").className = 'anim-opacity-disable' } }) } CSS-анимация:

@keyframes opacity-disable{ от{ непрозрачность: 1; } к{ непрозрачность: 0; дисплей: нет; } } @keyframes непрозрачность-включить{ от{ непрозрачность: 0; } к{ дисплей: гибкий; непрозрачность: 1; } } @keyframes черный { от{ цвет: #7A73FF; } к{ цвет:#04101C; } } @keyframes синий { от{ цвет:#04101C; } к{ цвет: #7A73FF; } } .anim-opacity-enable{ имя анимации: непрозрачность включить; продолжительность анимации: 0,2 с; количество итераций анимации: 1; функция синхронизации анимации: легкость; режим анимации-заполнения: вперед; } .anim-opacity-disable{ имя анимации: непрозрачность отключить; продолжительность анимации: 0,2 с; количество итераций анимации: 1; функция синхронизации анимации: легкость; режим анимации-заполнения: вперед; } .anim-черный{ имя анимации: черный; продолжительность анимации: 0,2 с; количество итераций анимации: 1; функция синхронизации анимации: легкость; режим анимации-заполнения: вперед; } .anim-blue { имя анимации: синий; продолжительность анимации: 0,2 с; количество итераций анимации: 1; функция синхронизации анимации: легкость; режим анимации-заполнения: вперед; } Идея анимации такая: вы нажимаете на текст справа, его цвет меняется, и слева появляется блок. Я хочу знать, как исправить эту анимацию и, возможно, сделать ее проще. Я начинаю это, поэтому верю, что ты мне поможешь. Спасибо!

Пытался изменить код JavaScript, например проверку клика if(document.getElementById("id").onclick)