HTML

Details element for HTML accordion

An HTML first "accordion". Forget about using JavaScript and make it simple for yourself by utilising semantic HTML. You can also style the default arrow by targeting the :marker pseudo element.

<details>
  <summary>What?</summary>
  Stay Home Stay Safe!
</details>

Updated: 19 January 2022

Open link in a new Tab

I don't think this is as much of a big deal now but at one point there was a real security concern over using target="_blank" and leaving yourself vulnerable to attacks.

<a
  href="<https://twitter.com/CollierAdam>"
  target="_blank"
  rel="noopener noreferrer"
>
  DM me on Twitter.
</a>

Updated: 19 January 2022