# Unobtrusive Tabs with Prototype and CSS

**URL:** https://discourse.softpress.com/t/unobtrusive-tabs-with-prototype-and-css/13346
**Category:** Freeway
**Created:** [February 25, 2012, 8:42pm UTC](https://discourse.softpress.com/t/unobtrusive-tabs-with-prototype-and-css/13346 "2012-02-25T20:42:15Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)
#### Post date: [February 25, 2012, 8:42pm UTC](https://discourse.softpress.com/t/unobtrusive-tabs-with-prototype-and-css/13346/1 "2012-02-25T20:42:15Z")

</div>

Here’s a demo of my tab area technique.

[http://scripty.walterdavisstudio.com/how-to-tab/](http://scripty.walterdavisstudio.com/how-to-tab/)

I haven’t made a Freeway example yet, but the style and script are extremely well commented, so I’m hoping that those of you who have been following my earlier examples will be able to adapt this directly.

I have pulled all of the style code out of the JavaScript, which was very confusing at best, and probably not very performant, either. Everything in this example hinges around a single classname, added to the parent element (tabbed) and then the choice of a single header tag (h2) to become the tabs. The content is laid out in one tall box as if it was a layer cake, with H2 as the frosting and [anything besides h2] as the cake.

The result is that if you approach the page with JavaScript turned off (as Google does), you will see a page that makes a lot of sense, semantically speaking, and everything will be visible. When you use a scripted browser, you will get a markedly shorter page with the tab controls.

Walter

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

### Author: ![Max\_Fancourt](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/e19adc/32.png) [@Max\_Fancourt](https://discourse.softpress.com/u/Max_Fancourt)
#### Post date: [February 26, 2012, 8:14am UTC](https://discourse.softpress.com/t/unobtrusive-tabs-with-prototype-and-css/13346/2 "2012-02-26T08:14:20Z")

</div>

Nicely done Walter very clean and easy to adapt for WebYep  
all the best max

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)