Accordion

Multiple Open

  • First Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Second Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Third Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<ul class="accordion">
  <li class="active">
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">First Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">Second Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
</ul>

Single Open

  • First Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Second Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Third Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<ul class="accordion single-open">
  <li class="active">
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">First Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">Second Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
</ul>

Style 2

  • First Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Second Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Third Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<ul class="accordion single-open style-2">
  <li class="active">
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">First Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">Second Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
</ul>

Style 3

  • First Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Second Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Third Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<ul class="accordion single-open style-3">
  <li class="active">
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">First Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">Second Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
</ul>

Border Radius

  • First Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Second Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Third Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<ul class="accordion single-open border-radius">
  <li class="active">
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">First Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">Second Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
</ul>

Rounded Corners

  • First Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Second Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Third Title

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<ul class="accordion single-open rounded">
  <li class="active">
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">First Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h6 class="font-family-tertiary font-small font-weight-medium uppercase">Second Title</h6>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum..</p>
    </div>
  </li>
</ul>