faq-accordion

Summary

Centered FAQ block with a two-line display heading. Five accordion rows numbered 01–05, each with a chevron caret that rotates when open. Behaviour is single-open: opening one closes the others (data-bs-parent).

HTML structure (minimal)

<section class="section-faq flat-spacing">
  <div class="container">
    <div class="s-header d-block">
      <h2 class="text-display-2 text-center effectFade fadeUp">Frequently<br>asked questions</h2>
    </div>
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <div class="accordion-faq_list" id="accordion-faq_list">
          <div class="accordion-faq_item">
            <div class="accordion-action collapsed" data-bs-target="#faq-1" data-bs-toggle="collapse" aria-controls="faq-1" aria-expanded="false">
              <span class="accordion-order">01</span>
              <p class="accordion-text">How long does a project usually take?</p>
              <div class="ic-wrap d-flex"><i class="icon icon-arrow-caret-down fs-10"></i></div>
            </div>
            <div id="faq-1" class="collapse" data-bs-parent="#accordion-faq_list">
              <p class="accordion-content">Most projects are completed within 4–8 weeks…</p>
            </div>
          </div>
          <!-- four more items -->
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.section-faq {
  .accordion-faq_item {
    border-bottom: 1px solid var(--white-16);
  }

  .accordion-action {
    display: grid;
    grid-template-columns: 48px 1fr 32px;
    align-items: center;
    padding: 24px 0;
    cursor: pointer;
    gap: 16px;

    .accordion-order { color: var(--white-64); }

    .ic-wrap i {
      transition: transform 0.3s ease;
    }

    &:not(.collapsed) .ic-wrap i {
      transform: rotate(-180deg);
    }
  }

  .accordion-content {
    padding: 0 0 24px 64px;
    color: var(--white-64);
    max-width: 80ch;
  }
}

Animation logic

// Bootstrap 5 collapse API; no custom JS.
// `data-bs-parent="#accordion-faq_list"` enforces single-open behaviour.

Notable details

• Item 02 starts open in the source markup (class="collapse show" and aria-expanded="false" mismatched — the visible default is "Do you work with international clients?").
• Caret rotates -180° on open, paired with the order number staying visually anchored on the left.
• Accordion content padding-left of 64px aligns the answer copy with the question text under the order number.

Use when

• FAQ blocks where you want each row to be a long horizontal strip rather than a card.
• Pages where the heading is the centerpiece and the accordion is a quiet supporting element.

Caveats

• The 02 default-open state means the first paint shows two open rows briefly until BS reconciles with data-bs-parent. Set the same aria-expanded and collapse show consistently to avoid flicker.
• Bootstrap 5 collapse JS dependency.