When you click it, it opens a dialog box for you to choose a template and we have these tabs and accordion items in there, all you have to do is click one to add it to your content..
Note that the jQuery widgets are themeable, you can specify the theme to use by setting a property on the StyleSheetCombiner control in your layout.master file of your skin.
<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="start" />
In the above exampleI'm using the theme named start. As of the time of this writing there are 18 jQuery UI themes:
base, black-tie, blitzer, cupertino, dot-luv, excite-bike, hot-sneaks, humanity, mint-choc, redmond, smoothness, south-street, start, swanky-purse, trontastic, ui-darkness, ui-lightness, vader
You can use any one of those. Note that although the control is named StyleSheetCombiner, it only combines the css files listed in the style.config file of your skin, it does not combine externally loaded css files like those for YUI or jQuery, those are loaded separately, by default from the google CDN (Content Delivery Network), unless you configure them to be loaded from local folders as described in this article.
Example Use of jQuery Accordion
<h3><a href="#">Section 1</a></h3>
<p>Section 1 content.</p>
<h3><a href="#">Section 2</a></h3>
<p>Section 2 content</p>
<h3><a href="#">Section 3</a></h3>
<p>Section 3 content</p>
<h3><a href="#">Section 4</a></h3>
<p>Section 4 content</p>
Example Use of jQuery Tabs
Using markup like this:
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<p>Tab 1 content</p>
<p>Tab 2 content</p>
<p>Tab 3 content</p>
Watch a Training Video About Using Content Templates