Vertical Wizard Accordion

<div class="vac" id="vac"><div class="vac-i open"><button>① Account<i>+</i></button><div class="vac-c"><p>Create your account with an email and password.</p></div></div><div class="vac-i"><button>② Profile<i>+</i></button><div class="vac-c"><p>Add your name, photo and a short bio.</p></div></div><div class="vac-i"><button>③ Finish<i>+</i></button><div class="vac-c"><p>Review and confirm — you're all set!</p></div></div></div>

body{background:#f6f7fa}
.vac{width:330px;font-family:system-ui,sans-serif}
.vac-i{border:1px solid #eceef3;border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff;transition:border-color .3s}
.vac-i.open{border-color:#ff477e}
.vac-i button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border:0;background:0;font:700 15px/1 system-ui,sans-serif;color:#1a1f36;cursor:pointer}
.vac-i i{font-style:normal;color:#ff477e;font-size:20px;transition:transform .3s}
.vac-i.open i{transform:rotate(45deg)}
.vac-c{max-height:0;overflow:hidden;transition:max-height .35s ease}
.vac-i.open .vac-c{max-height:100px}
.vac-c p{margin:0;padding:0 18px 16px;color:#66708a;font-size:14px;line-height:1.6}

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