Sjouke and I have been actively updating and improving the Swing Dance Luxembourg website. Informally, we’ve reached a division of tasks: Sjouke is focused more on content, and I focus more on tweaking CSS, HTML and Javascript. This division is obviously not 100% clear cut, but the Javascript work on the site that WordPress doesn’t handle, I do :) (yes, the website is running WordPress – you wouldn’t say, would you?)
One of the first more substantial pieces of work was making the FAQ such that it expands questions on a click. As with any programming task, the concept is fairly trivial, and the devil is in the details (e.g. updating the “?” character to a “?” for open questions). And, of course, Sjouke is perfectly happy to pretend he doesn’t understand code, and make user requests (“we ought to have a ‘show all’ link), which sound reasonable. Of course, there’s more than one way to implement such requests, and usually the easy way is not not quite supported by my Javascript… meaning more fun for me!
We’ve had a bit of a discussion on how to organise the descriptions of the various Swing Dances. There’s quite a few we describe, and just having all descriptions under each other was rather messy. Then I hit upon a great idea: using tabs!
The internet was rather helpful, and quite a few sites provide some bare-bones instruction on how to get the tabs looking like tabs. Halfway through, I switched to using this explanation, which was simple and showed some alternative approaches.
In a nutshell, you use a regular list (UL) for the tabs. So each tab is in its own LI element. You use CSS to then tweak the presentation. The beauty of using CSS, you can actually nicely separate presentation and structure, thus ensuring a better degredation for screen readers / non-graphical browsers. In particular, you’d use list-style: none outside none; for the UL, and either display: inline or float: left for the LIs. To get the tab to look as part of the content, you extend the padding on the bottom a bit to overlap with the content (and decrease the margin by a similar amount – to ensure the content is not pushed down by the padding).
As you can see, I tweaked the looks somewhat further. Adding a border to the LIs, except at the bottom. Rounding the corners of that border (border-radius), but not the bottom-left-radius or bottom-right-radius. I added a background to the lot.
Done! Right?
Nuh-uh.
The tabs don’t work yet.
Oh, right….
So, some coding is needed. Each tab’s “content” is in a separate DIV. All DIVs except the default one are set to display: none to hide them (which is not necessarily ideal — it still involves loading all DIVs upon first opening the page). So what is to happen when we click a tab? Well, the active content DIV is hidden, and the one clicked on is shown. That part is actually trivial.
But: the tab itself must also come to the foreground. I am currently coding the required style updates in Javascript itself, which is very ugly and makes it hard to update.
I just found this little gem, so basically I should be able to just update the class names instead of tweaking styles. While it works for now, I’ll probably have a look to that soon, because it just is so much better.
Nevertheless, the current result is already le awesome! To support old links to anchors (...#blues and such), I even added some Javascript to check if such a link was requested and then load the requested DIV. One funny thing that tripped me up there: you can only switch DIVs after the DIV is loaded. Rather obvious once phrased like that, but it means that that particular piece of Javascript has to be at the bottom of the page :)