A Mobile First Design of a FAQ Accordion

it looks good but here's how you can make your js file better: ` 'use strict';

const openAccordion = document.querySelectorAll('.topic');

openAccordion.forEach((element) => { element.addEventListener('click', function () { let contentText = this.nextElementSibling; contentText.classList.toggle('active');

if (contentText.classList.contains('active')) {
  contentText.style.maxHeight = `${contentText.scrollHeight}px`;
} else {
  contentText.style.maxHeight = null;
}

}); });`

and u can add active class in your CSS file , just as `/* Add this to your CSS */

.topic-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; /* Add a smooth transition effect */ }

.topic-content.active { max-height: 200px; /* Adjust the value based on your design / / Add any other styles you want for the active state */ } ` I hope this is much better