Tabset
[tabset] [tab_labels] [tab_label] [tab_contents] [tab_content] [/tabset]
Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.
Ut viverra semper magna, ac congue est imperdiet ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac mauris tortor. Cras eros tellus, congue sit amet pulvinar id, semper vitae est. Cras pretium, justo et viverra dignissim, libero sem blandit tortor, ac euismod libero mi ut leo tempus.
Ut viverra semper magna, ac congue est imperdiet ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac mauris tortor. Cras eros tellus, congue sit amet pulvinar id, semper vitae est. Cras pretium, justo et viverra dignissim, libero sem blandit tortor, ac euismod libero mi ut leo tempus.
Ut viverra semper magna, ac congue est imperdiet ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac mauris tortor. Cras eros tellus, congue sit amet pulvinar id, semper vitae est. Cras pretium, justo et viverra dignissim, libero sem blandit tortor, ac euismod libero mi ut leo tempus.
[tabset]
[tab_labels]
[tab_label]content...[/tab_label]
[tab_label]content...[/tab_label]
[/tab_labels]
[tab_contents]
[tab_content]content...[/tab_content]
[tab_content]content...[/tab_content]
[/tab_contents]
[/tabset]
[tabset skin="green" tab_align="left"] ... [/tabset]
[tabset skin="orange" tab_align="justify"] ... [/tabset]
[tabset skin="blue" tab_align="justify_and_gaps"] ... [/tabset]
Vertical Tabset
Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id. Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.
[tabset type="vertical" autoplay="true"]
[tab_labels]
[tab_label]content...[/tab_label]
[tab_label]content...[/tab_label]
[tab_label]content...[/tab_label]
[/tab_labels]
[tab_contents]
[tab_content]content...[/tab_content]
[tab_content]content...[/tab_content]
[tab_content]content...[/tab_content]
[/tab_contents]
[/tabset]
Toggle
[toggle] [toggle_title] [toggle_content] [/toggle]
Single Toggle
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle open="true"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
Faster Collapsing/Expanding
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle duration="200"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
Custom Toggle Icon
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle open_icon="arrow-down" closed_icon="arrow-right"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
Totally Custom Toggle
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
Shortcode:
[toggle open_icon="arrow-down" closed_icon="arrow-right" class="myToggle"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
CSS:
.myToggle .toggle_title {
font-size: 20px !Important;
background-color: green !Important;
background-image: none !Important;
}
.myToggle .toggle_title.open {
color: white !Important;
}
.myToggle .toggle_title.closed {
color: yellow !Important;
}
.myToggle .toggle_title.open > *[data-icon-open]:before {
color: #00ff00 !Important;
}
.myToggle .toggle_title.closed > *[data-icon-closed]:before {
color: orange !Important;
}
Toggle Group (Accordion - one open at a time)
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle group="sample"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="sample" open="true"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="sample"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
Tooltip
[tooltip] [/tooltip]
Move the mouse over this text.
[tooltip]
[tooltip_over]Move the mouse over this text.[/tooltip_over]
[tooltip_content]This is a tooltip.[/tooltip_content]
[/tooltip]
Extended Tooltip
[tooltip delayhide="1000"]
[tooltip_over]title...[/tooltip_over]
[tooltip_content]HTML content[/tooltip_content]
[/tooltip]
Tooltip direction:
[tooltip direction="up"]
[tooltip_over]title...[/tooltip_over]
[tooltip_content]content...[/tooltip_content]
[/tooltip]
[tooltip direction="right"]
[tooltip_over]title...[/tooltip_over]
[tooltip_content]content...[/tooltip_content]
[/tooltip]
