It it now possible as of mojoPortal version 2.3.0.4.to use some javascript UI widgets in your content. You can paste them in directly using markup as shown further down this pages, but you can also add them easily from the toolbar in the editor. If you'll notice there is a new icon in the FCKeditor toolbar for "Content Templates", its right next to the "Source" view button.
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
<div class="mojo-accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Section 4 content</p>
</div>
</div>
Example Use of jQuery Tabs
Using markup like this:
<div class="mojo-tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">
<p>Tab 1 content</p>
</div>
<div id="tab2">
<p>Tab 2 content</p>
</div>
<div id="tab3">
<p>Tab 3 content</p>
</div>
</div>
Watch a Training Video About Using Content Templates