Dialog

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<p><a id="link1" href="#dialog_for_link1">link 1</a></p>

Draggable

<div class="enhanceable_content draggable" style="width: 100px;">draggable</div>

Resize

<div class="enhanceable_content resizable" style="width: 100px;">resizable</div>

Sorting

<ul class="enhanceable_content sortable" style="display: none;">

<li>item 1</li>

<li>item 2</li>

</ul>

Accordion

<div class="enhanceable_content 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>

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

</div>

</div>

Tabs

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1"><span>One</span></a></li>

<li><a href="#fragment-2"><span>Two</span></a></li>

<li><a href="#fragment-3"><span>Three</span></a></li>

</ul>

<div id="fragment-1">Tab One: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div id="fragment-2">Tab Two: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div id="fragment-3">Tab Three: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</div>