Intro summary and details tags in HTML5

The <details> and the <summary> is the easiest way to create an accordean.

Code…

<details>
    <summary>Show Spoiler</summary>
    <p>The Zebra did it!</p>
</details>

You can get it to work in line as well…

<style type="text/css">
.inline {
    display:inline;
}
.inline summary {
    display:inline;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.inline span:before {
    content:"(";
}
.inline span:after {
    content:")";
}
</style>

<div>I want to learn
<details class="inline">
    <summary>HTML</summary>
    <span>Hyper Text Markup Language</span>
</details>
tomorrow</div>