Accordion

Default

  • First Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Second Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Third Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.


<ul class="accordion">
  <li class="active">
    <div class="accordion-title">
      <h6 class="fw-medium">First Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Second Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Third Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
</ul>

Default - Single Open

  • First Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Second Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Third Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.


<ul class="accordion single-open">
  <li class="active">
    <div class="accordion-title">
      <h6 class="fw-medium">First Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Second Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Third Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
</ul>

Style 2

  • First Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Second Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Third Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.


<ul class="accordion single-open style-2">
  <li class="active">
    <div class="accordion-title">
      <h6 class="fw-medium">First Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Second Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Third Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
</ul>

Style 3

  • First Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Second Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Third Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.


<ul class="accordion single-open style-3">
  <li class="active">
    <div class="accordion-title">
      <h6 class="fw-medium">First Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Second Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Third Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
</ul>

Border Radius

  • First Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Second Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Third Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.


<ul class="accordion single-open style-3 border-radius">
  <li class="active">
    <div class="accordion-title">
      <h6 class="fw-medium">First Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Second Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Third Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
</ul>

Rounded Corners

  • First Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Second Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

  • Third Question?

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.


<ul class="accordion single-open style-3 rounded">
  <li class="active">
    <div class="accordion-title">
      <h6 class="fw-medium">First Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Second Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="fw-medium">Third Question?</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </li>
</ul>

© 2024 FlaTheme, All Rights Reserved.