Want more features on Pastebin? Sign Up, it's FREE!
Guest

WP UI in templates

By: kavingray on Oct 3rd, 2011  |  syntax: HTML  |  size: 1.87 KB  |  views: 3,727  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!-- this is the structure required for initing the tabs -->
  2. <div class="wp-tabs wpui-light">
  3. <!-- add class   wpui-tabs-vertical  to the above line for vertical tabs -->
  4.      
  5.     <!-- First tab's name -->
  6.     <h3 class="wp-tab-title">Tab 1</h3>
  7.     <!-- First tab's contents -->
  8.     <div class="wp-tab-content">
  9.           All the contents of first tab goes here....
  10.     </div><!-- end first tab -->
  11.  
  12.       <!-- Like so, Second tab -->
  13.       <h3 class="wp-tab-title">Tab 2</h3>
  14.       <div class="wp-tab-content">
  15.             Contents of the second tab
  16.        </div>
  17.  
  18. </div><!-- end div.wp-tabs -->
  19.  
  20. <!-- /////////// -->
  21. <!-- /Accordion/ -->
  22. <!-- /////////// -->
  23.  
  24.  
  25. <!-- Same structure as the tabs, except for the class name .wp-accordion -->
  26. <div class="wp-accordion wpui-light">
  27.      
  28.     <!-- First tab's panel -->
  29.     <h3 class="wp-tab-title">Tab 1</h3>
  30.     <!-- First tab's contents -->
  31.     <div class="wp-tab-content">
  32.           All the contents of first tab goes here....
  33.     </div><!-- end first tab -->
  34.  
  35.       <!-- Like so, Second panel -->
  36.       <h3 class="wp-tab-title">Tab 2</h3>
  37.       <div class="wp-tab-content">
  38.             Contents of the second tab
  39.        </div>
  40.  
  41. </div><!-- end class wp-accordion -->
  42.  
  43.  
  44. <!-- /////////// -->
  45. <!-- //Spoilers// Before version 0.8.1 -->
  46. <!-- /////////// -->
  47.  
  48. <div class="wp-spoiler wpui-light">
  49. <h3 class="ui-collapsible-header"><span class="ui-icon"></span>Section 1</h3>
  50. <div class="ui-collapsible-content">Contents hidden within the spoiler</div>
  51. </div><!-- end .wp-spoiler -->
  52.  
  53.  
  54. <!-- /////////// -->
  55. <!-- //Spoilers// with version 0.8.7 -->
  56. <!-- /////////// -->
  57. <div id="wp-spoiler-1" class="wp-spoiler wpui-hashable wpui-light">
  58. <h3 class="wp-spoiler-title wpui-hashable">Spoiler Title</h3>
  59. <div class="wpui-hidden wp-spoiler-content">Content within spoiler</div>
  60. </div><!-- end div.wp-spoiler -->
clone this paste RAW Paste Data