Tabs and Accordions

Below are the configuration settings used to create the sample tabbed widget show above. This is a model that you can use as the basis for your own widgets

Content

The following fields are to support a three panel slider with captions for each slider.

Field Name	Field Type
label1	text
content1	rich text
label2	text
content2	rich text
label3	text
content3	rich text
color	text

Resources

The javascript and CSS powering this widget come from jQuery UI, a commonly used, free jQuery plugin. Since Percussion ships with this library, there is no need to download or reference these resources as they are automatically included as part of the page.

Display

This is the HTML needed to render the widget:

<div id="tabs">
<ul>
<li><a href="#tabs-1">$label1</a></li>
<li><a href="#tabs-2">$label2</a></li>
<li><a href="#tabs-3">$label3</a></li>
<li class="last"></li>
</ul>
<div id="tabs-1">
<p>$content1</p>
</div>
<div id="tabs-2">
<p>$content2</p>
</div>
<div id="tabs-3">
<p>$content3</p>
</div>
</div>