Loving The Details Element

I only recently discovered the HTML Details element and I am loving it. I immediately applied it on the footer of this blog to hide and show additional information such as about, contact, feeds, privacy, and so on.

In the previous version of my blog, I had everything listed on the footer, which got tedious to scroll, especially on mobile devices. Then I moved everything to an info page. That worked out OK, but I was not too crazy about the extra click. In addition, I don’t want to make an extra page for this blog. I wanted to keep only posts and no pages. Because I redesign this blog so often, I wanted to keep it as simple as possible so I can quickly go and give it a redesign without having to worry about a page format.

As a result, I brought all the additional information back to the footer, but put everything into a disclosure widget using the details and summary elements. To my amazement, they worked as expected without using any CSS or JavaScript. Take a look.