WP UI in templates

<!-- this is the structure required for initing the tabs -->
<div class="wp-tabs wpui-light">
<!-- add class   wpui-tabs-vertical  to the above line for vertical tabs -->

    <!-- First tab's name -->
    <h3 class="wp-tab-title">Tab 1</h3>
    <!-- First tab's contents -->
    <div class="wp-tab-content">
          All the contents of first tab goes here....
    </div><!-- end first tab -->

      <!-- Like so, Second tab -->
      <h3 class="wp-tab-title">Tab 2</h3>
      <div class="wp-tab-content">
            Contents of the second tab
       </div>

</div><!-- end div.wp-tabs -->

<!-- /////////// -->
<!-- /Accordion/ -->
<!-- /////////// -->


<!-- Same structure as the tabs, except for the class name .wp-accordion -->
<div class="wp-accordion wpui-light">

    <!-- First tab's panel -->
    <h3 class="wp-tab-title">Tab 1</h3>
    <!-- First tab's contents -->
    <div class="wp-tab-content">
          All the contents of first tab goes here....
    </div><!-- end first tab -->

      <!-- Like so, Second panel -->
      <h3 class="wp-tab-title">Tab 2</h3>
      <div class="wp-tab-content">
            Contents of the second tab
       </div>

</div><!-- end class wp-accordion -->


<!-- /////////// -->
<!-- //Spoilers// Before version 0.8.1 -->
<!-- /////////// -->

<div class="wp-spoiler wpui-light">
<h3 class="ui-collapsible-header"><span class="ui-icon"></span>Section 1</h3>
<div class="ui-collapsible-content">Contents hidden within the spoiler</div>
</div><!-- end .wp-spoiler -->


<!-- /////////// -->
<!-- //Spoilers// with version 0.8.7 -->
<!-- /////////// -->
<div id="wp-spoiler-1" class="wp-spoiler wpui-hashable wpui-light">
<h3 class="wp-spoiler-title wpui-hashable">Spoiler Title</h3>
<div class="wpui-hidden wp-spoiler-content">Content within spoiler</div>
</div><!-- end div.wp-spoiler -->