Mobile HTML CSS JS

I must admit it was more complicated that i expect. My first attempt in javascript was something like:

const query1 = document.querySelector(".q1"); const ans1 = document.querySelector(".a1"); query1.addEventListener("click", () => { if (ans1.style.display === "none") { ans1.style.display = "block"; query1.style.color = "hsl(238, 29%, 16%)"; query1.style.fontWeight = 700; } else { ans1.style.display = "none"; query1.style.color = "hsl(237, 12%, 33%)"; query1.style.fontWeight = 400; } });

repeted several times. Of course it was a waste of code! So i made an attempt with arrays but, even if it was technical correct, it didn't work. Then i reached my actual solution: far from perfect but simple and functional. I was unable to allow the opening of one answer at a time so if anyone can give me a tip it would be appreciated. Thanks in advance ;) (sorry for my english!)