Tabs Shortcode free WordPress plugin

To add tabs to you post or pages just add this shortcode: [tabs] [tab title=”title1″] tab content tab content [/tab] [tab title=”title2″] another content tab [/tab] [/tabs] Here are the some attributes that the shortcode also excepts // default attributes [tabs collapsible=true selected=’0′ event=’click’ position=’top’ ] [tab title=”title1″] tab content [/tab] [tab title=”title2″] another content tab [/tab] [/tabs] collapsible = true or false – weather the tabs should be allowed to be collapsed – this doesn’t work with twitter bootstrap selected = integer for example – what tab should be selected. 0 means the first tab. 1 means the second tab etc. event = ‘click’ or ‘mouseover’ – does do you user need to click on the tab or just mouse over to get to the content. Tip: Don’t use mouseover if you are concerned with mobile. position = ‘top’ , ‘bottom’ , ‘left’, ‘right’ on what side do you want the tabs to appear. See screenshots for an example. vertical_tabs = true or false – depreciated is the same as position = left Sample CSS Want to style the tabs a different way. Here is some sample css to get you started. Another place to look for it would be the http://jqueryui.com/themeroller/, The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework. See the FAQ on how to deal with that case. /* =tabs ————————————————————– */ .tabs-shortcode.ui-tabs { padding:.2em; zoom:1; clear:both; background:#FFF; padding:0; margin:0; } .tabs-shortcode.ui-tabs-nav { list-style:none!important; padding:.2em 0 0!important; margin: 0!important; } .tabs-shortcode .ui-tabs-nav:after{ visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; } * html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */ *:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */ .tabs-shortcode .ui-tabs-nav li { position:relative; float:left; border:1px solid #CCC; background:#EEE;