<div class="container">
  <details name="my-accordion">
    <summary>
      This is an example
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" aria-hidden="true" />
      </svg>
    </summary>
    <div class="details-info">
      <p>Lorem ipsum dolor sit amet, consectetur</p>
      <img src="https://picsum.photos/900/600?random=1" alt="" />
      <p>Phasellus vel erat a ante pharetra pharetra.</p>
    </div>
  </details>
  <details name="my-accordion" open>
    <summary>
      Of an accordion
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" aria-hidden="true" />
      </svg>
    </summary>
    <div class="details-info">
      <h2>Sweet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
    </div>
  </details>
  <details name="my-accordion">
    <summary>
      With just HTML
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" aria-hidden="true" />
      </svg>
    </summary>
    <div class="details-info">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
    </div>
  </details>
</div>

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

@layer defaults, demo;

@layer demo {
  :root {
    --container-width: 800px;
    --body-color: #1a1a1a;
    --collapse-bg: #e5fcff;
    --collapse-color: #1a1a1a;
    --collapse-line-color: #acacde;
    --collapse-icon-color: #b8336a;
    --collapse-box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }

  details {
    background: var(--collapse-bg);
    color: var(--collapse-color);
    box-shadow: var(--collapse-box-shadow);
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    &:first-child {
      border-radius: 0.5rem 0.5rem 0 0;
    }
    &:last-child {
      border-radius: 0 0 0.5rem 0.5rem;
    }
  }

  summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    cursor: pointer;
    list-style-type: none;
    font-weight: 400;
    font-size: 1.3rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2),
      0px -2px 4px rgba(255, 255, 255, 0.2);
  }

  summary,
  .details-info {
    padding: 1rem;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  .details-info {
    border-top: 1px solid var(--collapse-line-color);
  }

  summary .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: transform 0.26s;
    color: var(--collapse-icon-color);
  }

  details[open] summary .icon {
    transform: rotate(180deg);
  }
}

@layer defaults {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: "Lato", sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--body-color);
    background-image: linear-gradient(to bottom left, #bd00ff 0%, #ffec00 100%);
  }

  @supports (background: linear-gradient(in oklab, red, tan)) {
    body {
      background-image: linear-gradient(
        to bottom left in oklab,
        oklch(55% 0.45 309) 0%,
        oklch(100% 0.4 95) 100%
      );
    }
  }
  img {
    display: block;
    max-width: 100%;
    margin: 0 0 24px 0;
  }

  h2 {
    margin: 0 0 8px 0;
    font-family: "Lato", serif;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px;
  }
}