faq-accordion

Summary

Two-column FAQ band: a Bootstrap-collapse accordion of four questions on the left (with a serif H2 above) and a tall photo on the right with a circular ripple play button overlay (Magnific Popup). One question (#faq2) ships in the open state to demonstrate the answer styling.

HTML structure (minimal)

<section class="faq-section section-padding fix">
  <div class="container">
    <div class="faq-wrapper">
      <div class="row g-4 align-items-center">
        <div class="col-lg-6">
          <div class="faq-content">
            <div class="section-title">
              <span class="sub-title">Question</span>
              <h2>Frequently Asked <br>Question for Clients?</h2>
            </div>
            <div class="faq-accordion mt-4">
              <div class="accordion" id="accordion">
                <div class="accordion-item">
                  <h5 class="accordion-header">
                    <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq1">
                      1. What if I'm Not Happy With My Case?
                    </button>
                  </h5>
                  <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#accordion">
                    <div class="accordion-body">Our culture nurtures...</div>
                  </div>
                </div>
                <!-- 3 more items -->
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="faq-image">
            <img src="assets/img/faq/01.jpg" class="img-custom-anim-right wow">
            <a href="https://www.youtube.com/watch?v=R0mku_PtK1E" class="video-btn ripple video-popup">
              <i class="fa-duotone fa-play"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.faq-accordion {
  .accordion-item {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .accordion-button {
    font-family: "Prata", serif;
    font-size: 18px;
    background: var(--white);
    color: var(--header);
    box-shadow: none;
    &:not(.collapsed) {
      background: var(--bg);
      color: var(--theme);
    }
    &::after {
      background-image: none;
      content: "+";
      font-size: 24px;
      color: var(--theme);
      transform: none;
    }
    &:not(.collapsed)::after { content: "−"; }
  }
}
.faq-image {
  position: relative;
  .video-btn.ripple {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
}

Animation logic

// Bootstrap 5 collapse handles open/close — no custom JS.
$(".video-popup").magnificPopup({ type: "iframe" });

Notable details

• The default Bootstrap + / − chevron is replaced with a single typographic glyph via ::after content — easier to colour, no SVG needed.
• The image carries the centred ripple play button used elsewhere (hero, services) — re-use the same .video-btn.ripple class so all play CTAs share one keyframe.
• data-bs-parent="#accordion" enforces single-open behaviour; remove the attribute to allow multiple open at once.

Use when

• Service-firm FAQ where you want a paired video and questions ("watch this for the gist, or read for detail").
• Accordions that should look editorial (serif type) rather than utility (sans + chevron).

Caveats

• One item ships open by default (#faq2); be deliberate about which to show or strip the show class to start fully collapsed.