Faq accordion

I am still learning and trying to understand positioning. The app looks good when at views that have specific positioning rules applied. But making the screen larger or smaller from those views does not work as I would want.

Javascript for this app was good practice. I began to further grasp the importance of declaring a variable before updating it later in the code. In the below code currentAnswerDiv is delcared as null before the icons loop.

let currentAnswerDiv = null;

icons.forEach((icon) => {
icon.addEventListener('click', (event) => {
let answerDiv = icon.parentElement.nextSibling;
let question = icon.previousSibling.parentElement;

if (currentAnswerDiv === answerDiv) {
// The same answerDiv is clicked, so close it
answerDiv.classList.add('hidden');
question.style.fontWeight = 400;
icon.style.transform = 'rotate(0deg)';
currentAnswerDiv = null;
} else {
// A different answerDiv is clicked, so close the current one and open this one
if (currentAnswerDiv !== null) {
let currentOpen = currentAnswerDiv.parentElement.firstChild
let currentIcon =currentOpen.firstChild.nextSibling
currentAnswerDiv.classList.add('hidden');
currentOpen.style.fontWeight = 400;
currentIcon.style.transform = 'rotate(0deg)';
}
answerDiv.classList.remove('hidden');
question.style.fontWeight = 700;
icon.style.transform = 'rotate(180deg)';
currentAnswerDiv = answerDiv;
}
});
});

Next a condition is run to check if the click event happened on the same question that is already opened and if it did then reset currentAnswerDiv to null.

if (currentAnswerDiv === answerDiv) {
// The same answerDiv is clicked, so close it
answerDiv.classList.add('hidden');
question.style.fontWeight = 400;
icon.style.transform = 'rotate(0deg)';
currentAnswerDiv = null;
}

A second condition is run to see if a different icon than then the one opened has been clicked, and close it if it has. Saying currentAnswerDiv !== null confirms that the currentAnswerDiv is being utilized and therefore an answer is being shown.

else {
// A different answerDiv is clicked, so close the current one and open this one
if (currentAnswerDiv !== null) {
let currentOpen = currentAnswerDiv.parentElement.firstChild
let currentIcon =currentOpen.firstChild.nextSibling
currentAnswerDiv.classList.add('hidden');
currentOpen.style.fontWeight = 400;
currentIcon.style.transform = 'rotate(0deg)';
}

Finally, the changes are applied to the question/answer that was clicked.

answerDiv.classList.remove('hidden');
question.style.fontWeight = 700;
icon.style.transform = 'rotate(180deg)';
currentAnswerDiv = answerDiv;