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]
Different toggle titles when the toggle is open and closed
Click to close
Click to open
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] [toggle_title_open]Click to close[/toggle_title_open] [toggle_title_closed]Click to open[/toggle_title_closed] [toggle_content] 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_content] [/toggle]
Multiple toggle titles
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
[toggle] [toggle_title]Click to toggle[/toggle_title] [toggle_content] 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_content] [toggle_title]Click to toggle[/toggle_title] [/toggle]
Multiple toggle contents
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] [toggle_content] 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_content] [toggle_title]Click to toggle[/toggle_title] [toggle_content] 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_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 toggle is always open
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="max1min1"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="max1min1" open="true"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="max1min1"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
Toggle Group - at most one toggle can be open
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 group="max1min0" minopen="0"]
[toggle group="max1min0"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="max1min0"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="max1min0"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
Toggle Group - at most two toggles can be open
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 group="max2min0" maxopen="2" minopen="0"]
[toggle group="max2min0"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="max2min0"]
[toggle_title]title...[/toggle_title]
[toggle_content]content...[/toggle_content]
[/toggle]
[toggle group="max2min0"]
[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
Extended tooltip
[tooltip delayhide="1000"]
[tooltip_over]title...[/tooltip_over]
[tooltip_content]HTML content[/tooltip_content]
[/tooltip]
Tooltip direction:
tooltip direction up
[tooltip direction="up"]
[tooltip_over]title...[/tooltip_over]
[tooltip_content]content...[/tooltip_content]
[/tooltip]
tooltip direction right
[tooltip direction="right"]
[tooltip_over]title...[/tooltip_over]
[tooltip_content]content...[/tooltip_content]
[/tooltip]