Dynamic Tabs for Metadata

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.

2 thoughts on “Dynamic Tabs for Metadata

  1. Hey kasei,

    Yep, they just show up as one “tall” block, without the tabs at the top. The tab contents is shown in the order of the tabs.

    (In most browsers it’s easy to test, but in IE you can turn off “Active Scripting” in the security settings.)

Comments are closed.