I generate and store quite a lot of metadata with my photos, as can be gathered from my faceted photo index. Until now, I have simply displayed most of it beneath each photo on its page, but I wanted to make the interesting parts stand out more, while still providing access to the rest.

CSS and JavaScript to the rescue.

Simon Willison created a small script for toggling sections of page, easytoggle and debugging in Safari, which was subsequently improved to also handle Safari. That seemed like a great way to approach the problem — making it possible to structure the information, while still leaving it accessible to all.

However, there were (of course) a few quirks with that implementation, so I added a few lines of code to make it possible to not display the menu tabs when JavaScript isn’t enabled, and to make the inactive tabs dim until selected: easytoggle3.js

To designate a section as the tab section (to make it not show up without javascript), identify it with #toggle, and add a CSS instruction to make it not display: display: none. The rest of the script works just as the original, where links with class="toggle" are used to identify the parts that should be togglable.