Accordion

Use the "open" attribute in element ditails to keep the accordion open.

Example:

  
<details class="accordion-detail" name="first_accordion" open></details>

Default

Title One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title Two

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title Three

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title Four

Lorem ipsum dolor sit amet consectetur adipisicing elit. 

      

        <div class="accordion-default">
            <details class="accordion-detail" name="first_accordion" open>
                <summary class="accordion-title-default">Title One</summary>
                <p class="m-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
            </details>
            <details class="accordion-detail" name="first_accordion">
                <summary class="accordion-title-default">Title Two</summary>
                <p class="m-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
            </details>
            <details class="accordion-detail" name="first_accordion">
                <summary class="accordion-title-default">Title Three</summary>
                <p class="m-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
            </details>
            <details class="accordion-detail" name="first_accordion">
                <summary class="accordion-title-default">Title Four</summary>
                <p class="m-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
            </details>
        </div>

Bordered

Title One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title Two

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title Three

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title Four

Lorem ipsum dolor sit amet consectetur adipisicing elit. 

      

      <div class="accordion">
        <details class="accordion-detail" name="first_accordion">
            <summary class="accordion-title-top">Title One</summary>
            <p class="m-4 ">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
        </details>
        <details class="accordion-detail" name="first_accordion">
            <summary class="accordion-title-middle">Title Two</summary>
            <p class="m-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
        </details>
        <details class="accordion-detail" name="first_accordion">
            <summary class="accordion-title-middle">Title Three</summary>
            <p class="m-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
        </details>
        <details class="accordion-detail" name="first_accordion">
            <summary class="accordion-title-bottom">Title Four</summary>
            <p class="m-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
        </details>
      </div>