How to implement accordion drawer with pure html and css.

Recently I discovered details/summary native HTML that can be used to implement accordion drawer.

<details open>
  <summary>
    <h2>Hello<span></span></h2>
  </summary>
  <div>Drawer content</div>
</details>

Few lines of css to customize default behavior.

details { border-bottom: 1px solid black; }
details:hover { background-color: hsl(0, 0%, 86%); }
details[open]:hover { background-color: white; }
details[open] > summary { font-weight: 600; background-color: hsl(0, 0%, 95%); border-right: none;}
details[open] > summary span:before { content: '-'; }
details > summary span:before { content: '+'; }
details summary::-webkit-details-marker { display:none; }
summary { padding: 0.7rem 0.7rem 0 0.7rem; display: block; position: relative; cursor: pointer;}
summary span { display: inline-block; position: absolute; top: auto; right: 12px;}
summary:before { content: ''; }
details[open] summary ~ * { animation: fadeIn .5s ease-in-out; }
.details-body { padding-left: 0.7rem; font-size: 12px; }

Adding open attribute to <details> tag will render drawer in default open state.

Also, <span> element inside summary will render +/- to indicate open/close state.

Thanks for reading!

Demo below.

Drawer Top

Drawer Top Content

Drawer Bottom

Drawer Bottom Content