Summary detail b2b

by Petr Haluza

HTML

<details>
<summary>The Realm of the Elderlings</summary>
  <details>
  <summary>The Six Duchies</summary>
    <details>
    <summary>The Farseer Trilogy</summary>
      <div>
        <p>čau</p>
      </div>
    </details>
  </details>
</details>

CSS

summary { display: block; cursor: pointer; outline: 0; padding: 5px 10px 5px 30px; background:#F0F4F9}
summary::-webkit-details-marker { display: none; }
details { display: block; white-space: nowrap; position: relative}
details details {margin:5px 0 0 1em}

details > summary::before {
  transform: rotate(45deg); position: absolute; will-change: transform; transition: all 300ms ease;
  content: ""; border-top: 3px solid #90b2dc; border-right: 3px solid #80a3ce; left: 0; width: 8px; height: 8px; left:10px; top:8px
}
details[open] > summary::before { transform: rotate(135deg); top:5px; opacity:.5}

details p { margin: 0 0 10px}
details > div { margin: 10px}