FAQ Accordion Javascript CSS and Basic HTML

Community feedback

• 

  lieneil•560

  @NJVSPosted about 2 years ago

  Hi Caleb, what I've done is initially set a max-height: 0 to the p.answer, you can't animate a transition if you just set max-height to auto, so i use javascript property scrollHeight to get it's fully expanded height.

  //style.css
  .answer {
    max-height: 0;
  }
  
  //script.js
  button.addEventListener('click', function(){
    const answer= target.closest('div.faq-container').querySelector('p.answer');
    answer.style.maxHeight = `${answer.scrollHeight}px`
  }
  

  Marked as helpful

  0