A Mobile First Design of a FAQ Accordion

Community feedback

• 

  Raza Abbas•790

  @RazaAbbas62Posted 10 months ago

  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

  Marked as helpful

  1