Rotating Tabs Demo

And a great deal of CSS to display, position and style the whole.

/* Rotator Styles */
#wrapper {
    width:960px;
    border-top:3px solid #92a5bc;
    border-bottom:1px solid #92a5bc;
    margin:0 auto;
}

#rotator {
    background:#FFF;
    color:#000;
    position:relative;
    padding-bottom:2.6em;
    margin:0;
    font-size:16px;
    height:250px;
    padding-top:40px;
}

/* Tabs */
ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    line-height:1.3;
    text-decoration:none;
    font-size:100%;
    list-style:none;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
}

ul.ui-tabs-nav {
    position:absolute;
    top:0px;
    left:0;
    z-index:1;
    width:100%;
    background:#FFF url(../images/uitabsbg.gif) repeat-x bottom right;
    border-top:1px solid #FFF;
}

/* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {
    font-size:.8em;
    font-weight:normal;
    color:#999;
    background:#FFF url(../images/uitabsbg.gif) repeat-x bottom left;
    border-left:1px solid #FFF;
    border-right:1px solid #c5ced9;
}

/* Hovered Tab */
#rotator .ui-tabs-nav-item a:hover,
#rotator .ui-tabs-nav-item a:active {
    background:#FFF url(../images/uiactivetabbg.gif) repeat-x bottom left;
    color:#333;
}

#rotator .ui-tabs-nav-item a span {
    float:left;
    padding:1em;
    cursor:pointer;
}

/* Active Tab */
#rotator .ui-tabs-selected a:link,
#rotator .ui-tabs-selected a:visited,
#rotator .ui-tabs-selected a:hover,
#rotator .ui-tabs-selected a:active {
    background:#fff url(../images/uiactivetabbg.gif) repeat-x bottom left;
    color:#333;
}

/* Content Panels */
#rotator .ui-tabs-panel {
    font-family:Arial, Helvetica, sans-serif;
    clear:left;
    color:#000;
    padding:10px 540px 15px 15px;
    height:225px;
    overflow:auto;
}

#rotator .ui-tabs-hide {
    display:none;
}
#rotator h2 {
    color:#E75D00;
    font-weight:normal;
    margin:0;
    font-size:1.8em;
    line-height:1.2em;
}

#rotator p {
    margin:.5em 0;
    color:#333;
}

#rotator p.code{font-size:12px;font-family:serif;}

#rotator .btn_get_started {
    float:left;
    height:30px;
    width:99px;
    text-indent:-9999em;
    margin-right:7px;
    overflow:hidden;
    background:transparent url(../images/getstarted.gif) no-repeat
}

#rotator .btn_learn_more {
    float:left;
    height:26px;
    font-size:.9em;
}

/* Background Images */
#rotator #fragment-1 {
    background:transparent url(../images/coins.jpg) no-repeat top right;
}

#rotator #fragment-2 {
    background:transparent url(../images/bearings.jpg) no-repeat top right;
}

#rotator #fragment-3 {
    background:transparent url(../images/map.jpg) no-repeat top left;
    padding:10px 15px 15px 540px;
}

#rotator #fragment-4 {
    background:transparent url(../images/support.jpg) no-repeat top left;
    padding:10px 15px 15px 540px;
}

Ditto is used to generate the tab pane content, using a custom tpl chunk.

The tabsContentTpl

<div id="[+description+]" class="ui-tabs-panel" style="">
<h2>[+longtitle+]</h2>
[+content+]
</div>

The Ditto call

[[Ditto? &parents=`159` &tpl=`tabsContentTpl`]]

The tab items are generated with Wayfinder using custom outerTpl and rowTpl chunks to format the output in the way the JQuery requires.

tabsOuterTpl:

<ul class="ui-tabs-nav">[+wf.wrapper+]</ul>

tabsRowTpl:

<li class="ui-tabs-nav-item [+wf.classesnames+]" id="nav-[+wf.description+]"><a href="#[+wf.description+]"><span>[+wf.title+]</span></a></li>

The Wayfinder snippet call:

[[Wayfinder? &startId=`159` &level=`1` &outerTpl=`tabsOuterTpl` &rowTpl=`tabsRowTpl` &selfClass=`ui-tabs-selected`]]

This rotating tabbed content is done using JQuery UI. It requires the library files and a short bit of javascript code.