Accordion functionality in cards (articles)

[PacificBird]

For one of my work projects I needed to implement cards with the functionality of accordions. The solution I found was extremely simple, and I believe that this is a very common use-case, so I thought I should make a fork and send the changes in.

This is how it looks open:

This is how it looks closed:

and this is what the HTML looks like:

<article>
   <details open="">
      <summary>
         <header> <h3 style="margin:0;">Account Details</h3> </header>
      </summary>
      <p><b>Username: </b>doe.john</p>
      <p><b>Email: </b>[email protected]</p>
      <p><b>Name: </b>John Doe</p>
      <p><b>Business: </b>PicoCSS</p>
      <p><b>Role: </b>Developer</p>
   </details>
</article>

Very simple to accomplish, looks nice, and requires next to no changes to the source code. The heaviest change here is a few lines to vertically align the chevron.