Hello,

There is really step by step instructions on the site I pointed you at. Anyway, please read further to see what you can do to make the jQuery tabs menu work. Please take a look at this article: http://flowplayer.org/tools/demos/tabs/index.html and http://flowplayer.org/tools/demos/tabs/index.htm, it is a demo of the minimum tabs menu and I'll show you what steps need to be done in Kentico CMS.

1) Firstly, we'll prepare source files of Javascript and CSS stylesheet. Please download the Javascript .cs file: http://cdn.jquerytools.org/1.2.2/jquery.tools.min.js and save it to ~/CMSScripts/jQueryTabs/ folder.
Please also download CSS stylesheet .css: http://static.flowplayer.org/tools/css/tabs.css and save it to: ~/App_Themes/<your_site_CSS_stylesheet_codename>/. Additionally, please download the image used there: http://flowplayer.org/tools/img/tabs/blue.png and save it to the same location.

2) Please add the reference links to this Javascript and CSS stylesheet to the master page in: CMS Desk -> Content -> Root document -> Master page. It can look like this:

<script src="~/CMSScripts/jQueryTabs/jquery.tools.min.js"></script>

<link type="text/css" rel="stylesheet"  href="~/App_Themes/CorporateSite/tabs.css"  />

You will add also the Javascript from the example to enable the tabbing effect:

<script type="text/javascript">
// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script>

3) Now, you are ready to copy the HTML code:

<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>
</div>

And add the 'Static HTML' webpart to the document (on Design tab) and insert code above to the 'Text' property in the 'Source' mode of the WYSIWYG editor. Save the webpart.

4) It should work fine like this.

x) Still, it is kind of static, therefore you can use the Repeater webpart to generate this layout for content tree items automatically. There will be used two Repeaters in this scenario. You will take advantage of the content before/after where you insert the enwrapping HTML code: <ul class="tabs"> / </ul> and <div class="panes"> / </div>, respectively. In first Repeater's transformation you can have code like this:

<li><a href="#"><%# Eval("Column1") %></a></li>

and in the second one:

<div><%# Eval("Column2") %></div>

Basically, it is up to you how you modify it. It is just an example. Hope you'll be able to achieve that.

Best regards
Ondrej Vasil