Tab Toggle Tooltip

Tabset

[tabset] [tab_labels] [tab_label] [tab_contents] [tab_content] [/tabset]

[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

[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

[toggle open="true"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

Faster Collapsing/Expanding

[toggle duration="200"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

Different toggle titles when the toggle is open and closed

[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

[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

[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

[toggle open_icon="arrow-down" closed_icon="arrow-right"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

Totally Custom Toggle

[toggle open_icon="arrow-down" closed_icon="arrow-right" class="myToggle"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

.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

[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

[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

[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]

[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]

Custom Tooltip:

[tooltip direction="up"]
    [tooltip_over]title...[/tooltip_over]
    [tooltip_content frameclass="myTooltip"]content...[/tooltip_content]
[/tooltip]

.myTooltip .dottoro_tooltip_content {background-color:#3198d9;}
.myTooltip.dottoro_tooltip_up .dottoro_tooltip_arrow {border-top-color:#3198d9}