Ajax tabbed content that degrades gracefully without Javascript

April 1, 2007 5:40 AM by Ann

Having no internet access at my new apartment has resulted in my being shockingly productive offline — writing, reading, and reworking bits of code that I might have a use for someday.

One of my recent obsessions has been with tabbed content. In my opinion, every page offering tabbed content simply MUST degrade gracefully without Javascript; there’s absolutely nothing worse than completely inaccessible content! For smaller, less complicated content panes, I’ve found this tabber script to be the best as the markup is very clean and minimal. In the absence of Javascript support, this method will simply show all content panes on the same page.

However, what I wanted was to have a dynamically loaded tabbed content page degrade to static tabbed content pages that still looked and functioned the same way. A web search led me to the Ajax Tabs Content script from Dynamic Drive. Without Javascript, it simply loads the content pane by itself in the browser window. I wanted it to load the pane from within the template of the original page, so I devised a method to accomplish this by using some PHP code.

All of the original features of the script are intact, including external css and javascript file support… but as with the original script, once loaded they’re there to stay through subsequent tab switches. I’ll have to see what I can do later about unloading those styles.

I also added cookies to the original script so that it now restores current tab content upon reload.

How it works should be pretty clear from looking at the demo source, and the PHP code is used in the same way that you would to handle any static menu and page templates: designate the currently selected item on the tabbed menu list, include the selected external source file in the content section, and add any associated stylesheets/javascript files to the header. To get the Javascript bit working, the link rel attributes should contain the content container id, and the rev attribute should contain a comma-separated list of the external files, source page first.

I suggest using mod_rewrite to rewrite the urls so that the links look pretty and ensure that all pages will get indexed by search engines.

Demo
Download demo source