Smooth Animated Accordion

<div class="acc" id="acc">
  <div class="acc-item"><button class="acc-q">Is it really free?<span class="acc-i"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M6 9l6 6 6-6"/></svg></span></button><div class="acc-a"><p>Yes — every snippet is free to copy and use in any project, personal or commercial.</p></div></div>
  <div class="acc-item"><button class="acc-q">Do I need a framework?<span class="acc-i"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M6 9l6 6 6-6"/></svg></span></button><div class="acc-a"><p>No. Everything is plain HTML, CSS and JavaScript with zero dependencies.</p></div></div>
  <div class="acc-item"><button class="acc-q">Can I edit the code?<span class="acc-i"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M6 9l6 6 6-6"/></svg></span></button><div class="acc-a"><p>Absolutely. Copy any file or download the whole component and tweak away.</p></div></div>
</div>

*{box-sizing:border-box}
.acc{width:380px;max-width:100%;font-family:system-ui,sans-serif}
.acc-item{border:1px solid #eceef3;border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:0;background:0;font-size:15px;font-weight:600;color:#1a1f36;cursor:pointer;text-align:left}
.acc-i{display:flex;color:#5b6cff;transition:transform .3s}
.acc-item.open .acc-i{transform:rotate(180deg)}
.acc-a{height:0;overflow:hidden;transition:height .3s ease}
.acc-a p{margin:0;padding:0 18px 18px;color:#66708a;line-height:1.6}

document.querySelectorAll('.acc-item').forEach(function(item){
  var q=item.querySelector('.acc-q'),a=item.querySelector('.acc-a');
  q.onclick=function(){
    var open=item.classList.contains('open');
    document.querySelectorAll('.acc-item').forEach(function(o){o.classList.remove('open');o.querySelector('.acc-a').style.height='0px'});
    if(!open){item.classList.add('open');a.style.height=a.scrollHeight+'px';}
  };
});