I'm not a jQuery guru but I'm sure that semantic HTML guys and gals
out there will understand my rational. I've looked all around, but I
can't find a nicely degrading tabs/rotator add-on, so I'm looking for
some thoughts on either creating one or improving one. I don't want to
step on any toes and please let me know if I'm discussing this in the
wrong place, but here's my thoughts.
If JavaScript is disabled on versions of tabbed content you end up
with a list of links that either link to the content on the same page
or link to a cover page somewhere, whereas what you should get in my
eyes is just a list of the content that you would otherwise be tabbing
through.
<div id="tabbedContent">
<h2 class="tabTitle">Tab 1</h2>
<div class="tabArea">
<p>...</p>
<div>
<h2 class="tabTitle">Tab 2</h2>
<div class="tabArea">
<p>...</p>
<div>
<h2 class="tabTitle">Tab 3</h2>
<div class="tabArea">
<p>...</p>
<div>
<h2 class="tabTitle">Tab 4</h2>
<div class="tabArea">
<p>...</p>
<div>
</div>
I think you'll agree that this will look a heck of a lot better on
search engines and by screen readers, etc. and it can't be difficult
to create the jQuery that captures the elements with class="tabTitle"
and creates and appends an unordered list to the containing div.
I've done a version here but since my jQuery skills are minimal I've
had to do specific targeting, where I'm sure someone with better
skills would be able to add all the funky stuff we're used to with
jQuery without having to specifically class all the headers/content
divs.
Here's functioning but not well written implementation (look at the
rendered and generated markup on the rotator and the tab on the top):
http://deliciouslivingmag.com
http://deliciouslivingmag.com/js/tools.js
My additional thoughts are that you could add classes to the element
similar to the cooler add-ons like:
tabbedContent - "numbers pause-play"
tabTitle - "remove"
tabContent - "fadeIn"
Thank you for your time, and if no one's interested, I'll do the
development myself and share it later... :)
Cheers
Steve
