transition help

Question

property "transition: color .9 ease; " knocks down all other transition properties.
and there are also options for optimizing the js code
https://code.sololearn.com/W6SF12oDtQmE/?ref=app

Answer 1

const Btns = document.querySelectorAll(".btn")
const Sqrs = document.querySelectorAll(".square")

window.onload = () => {
Btns[0].addEventListener('click', () => { SetAtvs('red') })
Btns[1].addEventListener('click', () => { SetAtvs('green') })
Btns[2].addEventListener('click', () => { SetAtvs('yellow') })
Btns[3].addEventListener('click', () => { SetAtvs('blue') })

SetAtvs()
}

SetAtvs = (atv='') => {
Btns.forEach((e) => {
e.classList.remove('_active');
if (e.textContent == atv.toLowerCase()) e.classList.add('_active');
});
Sqrs.forEach((e) => {
e.classList.remove('active');
if (e.textContent== atv.toUpperCase()) e.classList.add('active');
});
}

https://code.sololearn.com/Wm64suaorJH2

Answer 2

Unreasonable ,

Inside the "window.onload" block call the setatvs function and pick your desired color
For example: SetAtvs('red')

Answer 3

I moved your js to the bottom of the body of html.

Apparently only the bottom transition definition will be used. You can combine the 3 effects by separating them with commas.
https://code.sololearn.com/W9UJNTgdPeID/?ref=app

Answer 4

Lochard ,

why did you move the js code to the body of html?

Answer 5

transition

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 6

SoloProg and how to make the first block initially open?

Answer 7

SoloProg thank you very much

Answer 8

SoloProg and what if there are no keywords in the blocks, then what to refer to when switching?

Answer 9

Unreasonable ,

When you call the function it will activate the keyword that it has.