FAQ Accordion with Plus Icon

<div class="fq" id="fq"><div class="fq-i"><button>How does billing work?<span class="fq-x"></span></button><div class="fq-a"><p>You're billed monthly and can cancel anytime from your dashboard.</p></div></div><div class="fq-i"><button>Is there a free plan?<span class="fq-x"></span></button><div class="fq-a"><p>Yes — a generous free tier with no credit card required.</p></div></div><div class="fq-i"><button>Can I upgrade later?<span class="fq-x"></span></button><div class="fq-a"><p>Absolutely, upgrade or downgrade at any time with prorated billing.</p></div></div></div>

body{background:#f6f7fa}
.fq{width:340px;font-family:system-ui,sans-serif;display:flex;flex-direction:column;gap:10px}
.fq-i{background:#fff;border:1px solid #eceef3;border-radius:14px;overflow:hidden}
.fq-i button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:0;background:0;font:600 15px/1 system-ui,sans-serif;color:#1a1f36;cursor:pointer;text-align:left}
.fq-x{position:relative;width:16px;height:16px;flex:none}
.fq-x::before,.fq-x::after{content:'';position:absolute;background:#ff477e;border-radius:2px;transition:transform .3s}
.fq-x::before{top:7px;left:0;width:16px;height:2px}
.fq-x::after{left:7px;top:0;width:2px;height:16px}
.fq-i.open .fq-x::after{transform:rotate(90deg);opacity:0}
.fq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.fq-i.open .fq-a{max-height:120px}
.fq-a p{margin:0;padding:0 18px 16px;color:#66708a;font-size:14px;line-height:1.6}

document.querySelectorAll('.fq-i button').forEach(function(b){b.onclick=function(){var it=b.parentElement,was=it.classList.contains('open');document.querySelectorAll('.fq-i').forEach(function(x){x.classList.remove('open')});if(!was)it.classList.add('open')}});