Foldings

Default

Use <details> tag to make foldings.

Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

<details class="folding">
  <summary class="folding-title">
    Folding
    <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
  </summary>
  <div class="folding-content">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
    </p>
  </div>
</details>

Folding Group

First Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

Second Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

Third Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

<div class="folding-group">

  <details class="folding">
    <summary class="folding-title">
      First Folding
      <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
    </summary>
    <div class="folding-content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
      </p>
    </div>
  </details>

  <details class="folding">
    <summary class="folding-title">
      Second Folding
      <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
    </summary>
    <div class="folding-content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
      </p>
    </div>
  </details>

  <details class="folding">
    <summary class="folding-title">
      Third Folding
      <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
    </summary>
    <div class="folding-content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
      </p>
    </div>
  </details>

</div>

Borderless Folding

Borderless Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

<details class="folding folding-borderless">
  <summary class="folding-title">
    Borderless Folding
    <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
  </summary>
  <div class="folding-content">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
    </p>
  </div>
</details>

Borderless Folding Group

First Borderless Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

Second Borderless Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

Third Borderless Folding

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.

<div class="folding-group">

  <details class="folding folding-borderless">
    <summary class="folding-title">
      First Borderless Folding
      <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
    </summary>
    <div class="folding-content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
      </p>
    </div>
  </details>

  <details class="folding folding-borderless">
    <summary class="folding-title">
      Second Borderless Folding
      <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
    </summary>
    <div class="folding-content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
      </p>
    </div>
  </details>

  <details class="folding folding-borderless">
    <summary class="folding-title">
      Third Borderless Folding
      <svg class="icon icon-right icon-rotate"><use xlink:href="/assets/icons/feather.svg#chevron-down"/></svg>
    </summary>
    <div class="folding-content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident saepe deserunt veritatis? Totam, corrupti. Dolor quos, numquam totam quae ea enim maiores sequi et? Optio harum adipisci neque nemo.
      </p>
    </div>
  </details>

</div>