Tab Shortcode

Tabs Shortcode Explanation

[pre][tabs
    effect=”slide”     Animation to play when changing tabs
    opentab=”0″        The tab open when the page loads
]
 
    [tab
        title=””       The title displayed on the tab for this pane
        style=””       Custom CSS rules for this tab can be placed here
        ]
        first tab content
    [/tab]
 
    [tab]2nd tab content[/tab]
 
    [tab]3rd tab content[/tab]
 
[/tabs]
[/pre]

[infobox]Effect values:
    slide or fade
Opentab values:
    The number here refers to the index of the tab. 0 is the first tab, 1 is the 2nd tab, and so forth.[/infobox]


Tabs Example

[pre][tabs]
 
    [tab title=”Tab 1 Title”]…[/tab]
 
    [tab title=”Tab 2 Title”]…[/tab]
 
    [tab title=”Tab 3 Extraaaaaaaa Looooong Title” style=”height: 150px;”]…[/tab]
 
[/tabs]
[/pre]

[tabs]

[tab title=”Tab 1 Title”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nisl ut risus cursus venenatis. Vivamus dictum libero nec mauris fringilla et semper turpis ornare. In hac habitasse platea dictumst. Nulla vitae nibh sapien, vestibulum egestas enim. Vivamus sollicitudin, lorem vehicula dapibus volutpat, nulla dolor ultricies nisl, tincidunt bibendum tortor lorem sit amet metus. Duis dictum malesuada purus, fringilla tempor libero posuere nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis, justo ac blandit gravida, felis mauris luctus dui, eget pretium augue elit eget leo. Vestibulum et nunc a ipsum feugiat congue. Pellentesque et erat mi, vitae pretium dui. Duis ullamcorper lacus sit amet quam scelerisque dignissim id id massa. Donec rutrum venenatis odio ut congue. Phasellus convallis dui eget eros facilisis mollis. Donec ut felis non nisl semper elementum.[/tab]

[tab title=”Tab 2 Title”]Vestibulum mauris arcu, pharetra ac commodo eget, commodo id enim. Proin consectetur odio sed ligula rhoncus fringilla. Praesent ultrices lorem sit amet tortor tincidunt sodales a pellentesque lectus. Maecenas venenatis egestas urna. Donec tincidunt eros nec tellus ullamcorper quis aliquet libero accumsan. Nunc tempor egestas venenatis. Donec lectus tortor, congue eget mollis in, vulputate vel ante. Vivamus pharetra massa vel arcu mollis a pretium leo iaculis. Mauris et nunc nibh, sit amet dictum ante. Quisque blandit sollicitudin velit, nec blandit quam mattis nec. Mauris scelerisque, lorem non pharetra condimentum, enim mi congue odio, ut semper ipsum neque id urna. Proin sodales pharetra justo. Etiam vel tellus ut leo scelerisque ultrices. Pellentesque sit amet justo et ipsum porta viverra eu in elit. Vivamus condimentum congue leo ac semper. Praesent rhoncus consectetur odio quis pulvinar. Phasellus vel molestie leo. Phasellus hendrerit ante eu nulla mollis mollis. Suspendisse vel sem est, eu dapibus nisl. Etiam velit libero, faucibus nec feugiat in, semper eget est.[/tab]

[tab title=”Tab 3 Extraaaaaaaa Looooong Title” style=”height: 150px;”]Etiam vel tellus ut leo scelerisque ultrices. Pellentesque sit amet justo et ipsum porta viverra eu in elit.[/tab]

[/tabs]


Example Inside a Column

[col2]

[pre][tabs effect=”fade” opentab=”1″]
 
    [tab title=”Tab 1 Title”]…[/tab]
 
    [tab title=”Tab 2 Title”]…[/tab]
 
[/tabs]
[/pre]

[/col2]

[col2 last=”true”]

[tabs effect=”fade” opentab=”1″]

[tab title=”Tab 1 Title”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nisl ut risus cursus venenatis. Vivamus dictum libero nec mauris fringilla et semper turpis ornare. In hac habitasse platea dictumst. Nulla vitae nibh sapien, vestibulum egestas enim. Vivamus sollicitudin, lorem vehicula dapibus volutpat, nulla dolor ultricies nisl, tincidunt bibendum tortor lorem sit amet metus. Duis dictum malesuada purus, fringilla tempor libero posuere nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis, justo ac blandit gravida, felis mauris luctus dui, eget pretium augue elit eget leo. Vestibulum et nunc a ipsum feugiat congue. Pellentesque et erat mi, vitae pretium dui. Duis ullamcorper lacus sit amet quam scelerisque dignissim id id massa. Donec rutrum venenatis odio ut congue. Phasellus convallis dui eget eros facilisis mollis. Donec ut felis non nisl semper elementum.[/tab]

[tab title=”Tab 2 Title”]Vestibulum mauris arcu, pharetra ac commodo eget, commodo id enim. Proin consectetur odio sed ligula rhoncus fringilla. Praesent ultrices lorem sit amet tortor tincidunt sodales a pellentesque lectus. Maecenas venenatis egestas urna. Donec tincidunt eros nec tellus ullamcorper quis aliquet libero accumsan. Nunc tempor egestas venenatis. Donec lectus tortor, congue eget mollis in, vulputate vel ante. Vivamus pharetra massa vel arcu mollis a pretium leo iaculis. Mauris et nunc nibh, sit amet dictum ante. Quisque blandit sollicitudin velit, nec blandit quam mattis nec. Mauris scelerisque, lorem non pharetra condimentum, enim mi congue odio, ut semper ipsum neque id urna. Proin sodales pharetra justo. Etiam vel tellus ut leo scelerisque ultrices. Pellentesque sit amet justo et ipsum porta viverra eu in elit. Vivamus condimentum congue leo ac semper. Praesent rhoncus consectetur odio quis pulvinar. Phasellus vel molestie leo. Phasellus hendrerit ante eu nulla mollis mollis. Suspendisse vel sem est, eu dapibus nisl. Etiam velit libero, faucibus nec feugiat in, semper eget est.[/tab]

[/tabs]

[/col2]