FAQ Accordion Card with HTML, CSS and Vanilla JS

Hi there. You did a good job 😎

keep improving your programming skills🛠️

your solution looks great, however, if you want to improve it, you can follow these steps:

✅instead of this loop, you can hide all these items at once

//first loop to set property display = none to all faqs answers (<p>)
for(faqs of faq) {
	faqs.style.display = 'none';
}

✅instead of setting inline styles, it is better to set classes

if(faq[i].style.display == 'none') {
	faq[i].style.display = 'block';
	arr[i].style.fontWeight = 'bold';
	icon[i].style.transform = 'rotate(0.5turn)';
} else {
	faq[i].style.display = 'none';
	arr[i].style.fontWeight = 'normal';
	icon[i].style.transform = 'rotate(1turn)'; //rotate the arrow icon when the user click on button
}

I hope my feedback will be helpful. You can mark it as useful if so 👍

Good luck and fun coding 🤝⌨️