FAQ: accordion

What you receive in Webflow

• 27 native elements and 10 classes.
• Breakpoints: mobile landscape (767px).
• 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="fa">
  <div class="fa-inner">
    <h2 class="fa-title">Frequently asked questions</h2>
    <div class="fa-list">
      <div class="fa-item is-open">
        <button class="fa-q" aria-expanded="true">Can I change plans later?<span class="fa-icon"></span></button>
        <div class="fa-a"><p class="fa-text">Yes. Upgrade or downgrade at any time from your account. We prorate the difference to the day.</p></div>
      </div>
      <div class="fa-item">
        <button class="fa-q" aria-expanded="false">Do you offer a free trial?<span class="fa-icon"></span></button>
        <div class="fa-a"><p class="fa-text">Every paid plan starts with 14 days free. No credit card needed to start.</p></div>
      </div>
      <div class="fa-item">
        <button class="fa-q" aria-expanded="false">Where is my data stored?<span class="fa-icon"></span></button>
        <div class="fa-a"><p class="fa-text">In the EU or the US, your choice. Data never leaves the region you pick.</p></div>
      </div>
      <div class="fa-item">
        <button class="fa-q" aria-expanded="false">How do I cancel?<span class="fa-icon"></span></button>
        <div class="fa-a"><p class="fa-text">Two clicks in Billing settings. You keep access until the end of the period you paid for.</p></div>
      </div>
    </div>
  </div>
</section>
<style>
.fa { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #ffffff; color: #0c0a09; padding: 104px 24px; }
.fa-inner { max-width: 760px; margin: 0 auto; }
.fa-title { font-size: 42px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; margin: 0 0 48px; }
.fa-list { border-top: 1px solid #e7e5e4; }
.fa-item { border-bottom: 1px solid #e7e5e4; }
.fa-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 19px; font-weight: 700; color: #0c0a09; }
.fa-icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; transition: transform 0.3s ease; }
.fa-icon::before, .fa-icon::after { content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; background: #0c0a09; }
.fa-icon::after { transform: rotate(90deg); }
.fa-item.is-open .fa-icon { transform: rotate(45deg); }
.fa-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.fa-item.is-open .fa-a { max-height: 240px; }
.fa-text { font-size: 17px; line-height: 1.6; color: #57534e; margin: 0 0 24px; }
@media (max-width: 767px) { .fa { padding: 72px 20px; } .fa-title { font-size: 32px; } .fa-q { font-size: 17px; } }
</style>
<script>
document.querySelectorAll(".fa-q").forEach(function (q) {
  q.addEventListener("click", function () {
    var item = q.closest(".fa-item");
    var open = item.classList.toggle("is-open");
    q.setAttribute("aria-expanded", open ? "true" : "false");
  });
});
</script>