Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

Toggle

[toggle_group], [toggle], [toggle_title], [toggle_title_closed], [toggle_title_open], [toggle_content]

With these shortcodes you can display collapsible contents. The [toggle_title], [toggle_title_open], [toggle_title_closed] and [toggle_content] shortcodes display the title and the collapsible content of a toggle and can only be used within a [toggle] shortcode. Clicking on the title expands and collapses the content.

The difference between the [toggle_title], [toggle_title_open] and [toggle_title_closed] shortcodes is that the content displayed by the [toggle_title] shortcode is always visible while the [toggle_title_open] shortcode displays its content only when the toggle is open, the [toggle_title_close] shortcode only when the toggle is closed.
The [toggle_title_open] and [toggle_title_closed] shortcodes are mostly useful if you want to display different titles when the toggle is open and closed.

A single toggle may have multiple collapsible contents and titles. In that case, clicking on any title opens or closes all collapsible contents. You can see how it works via the Live Example link below.

Toggles can be arranged in groups. Use the 'group' attribute of toggles to arrange them in groups and use the toggle_group shortcode if you want to change the default settings of a group (the minimum and maximum number of open toggles).

Attributes supported by the [toggle_group] shortcode.
group Specifies the identifier of the group whose settings you want to change.
maxopen Specifies the maximum number of open toggles. Default: 1.
minopen Specifies the minimum number of open toggles. Default: 1.
Attributes supported by the [toggle] shortcode.
open Set whether the toggle should be open by default or not. (true | false). Default: false.
eventtype The type of user interaction that expands and collapses the toggle. (click | mouseover). Default: 'click'.
connect Specifies the connect identifier of the toggle. Toggles with the same connect identifier are connected. Connected toggles behave as a single toggle. This option is mostly useful if you want to place the toggle title and content in different areas of the page. For instance, the content at the top, the title at the bottom.
The FAQ 2 demo page demonstrates this feature.
group Specifies the group identifier of the toggle. Toggles with the same group identifier belong to the same group. By default, at most one toggle can open in a group and the open toggle cannot be closed but the toggle_group shortcode allows you to modify these settings.
open_icon Specifies an icon for the title(s) to display when the toggle is open. Default: 'minus'.
This setting can be overridden for individual titles.
For a complete list of icons, see Font Icons.
open_iconset Specifies the icon set that contains the icon referred by open_icon (see above). Default is an empty string. If the value is an empty string, the theme automatically tries to find an icon set that contains the icon.
This setting can be overridden for individual titles.
For the supported icon sets, see Font Icons.
closed_icon Specifies an icon for the title(s) to display when the toggle is closed. Default: 'plus'.
This setting can be overridden for individual titles.
For a complete list of icons, see Font Icons.
closed_iconset Specifies the icon set that contains the icon referred by closed_icon (see above). Default is an empty string. If the value is an empty string, the theme automatically tries to find an icon set that contains the icon.
This setting can be overridden for individual titles.
For the supported icon sets, see Font Icons.
add_wrapper Specifies whether the toggle shortcode should create a wrapper element around its content or not (true | false). Default is true.
standard Specifies whether the standard CSS styles should be applied to the toggle or not (true | false). Default is true.
This is a convenience feature. If you need a totally custom toggle, in some cases, it makes styling easier if you turn the standard CSS styles off.
section Specifies the HTML element the state-dependent CSS classes should be added to.
Possible values:
  • _html: the root HTML element of the document
  • _body: the body element of the document
  • _section: the outermost HTML element belonging to the parent section of the toggle. Sections are: popup windows' body, slides in slideshows, the content part of tabs and toggles.
  • HTML id of element: the element with the specified id.
Default is _section.

For further details, please see the section_class attribute below.

section_class By default the following CSS classes are added to the wrapper elements of the toggle, toggle title and toggle content:
  • open: the toggle is open
  • opening: the toggle is during opening
  • closing: the toggle is during closing
  • closed: the toggle is closed
You can use these CSS classes to style the toggle based on its current state.

In most cases, this provides enough flexibility, but in some cases, it would be useful if the state-dependent CSS classes were also added to an ancestor element of the toggle. For instance when the toggle is a floating panel and you want the page content to be narrower when the panel is open. The "section" and "section_class" attribtes have been designed for these cases. With the help of the "section" attribute you can specify a HTML element to which the state-dependent classes will be added. And the "section_class" attribute allows you to specify a class name that will be used to create the the state-dependent classes for the ancestor element.
The classes will be created based on the following format: toggle_<section_class>_<state_class>.

For instance, if "section" is "_html" and "section_class" is "my_panel", then the "toggle_my_panel_open", "toggle_my_panel_closed", "toggle_my_panel_opening", "toggle_my_panel_closing" will be added to the root HTML element.
Or, if "section" is "_body" and "section_class" is "my_second_panel", the classes will look like these: "toggle_my_second_panel_open", "toggle_my_second_panel_closed", "toggle_my_second_panel_opening", "toggle_my_second_panel_closing".

Tip: Take a look at our demo page and open the "Fullsize Single - Right Panel" popup slideshow by clicking on the second image. It demonstrates the use of the "section_class" attribute. When the right floating panel is open, the content is narrower. The theme also includes this slideshow ("Popup - Right Panel" profile).
close_on_slidechange This attribute has been designed for toggles within slideshows. It specifies whether the toggle should be closed when a slide transition starts (true | false). Default is false.
anim_duration The duration of the expand/collapse animation, in milliseconds. Default: 450.
anim_easing The easing of the expand/collapse animation. Easing functions (timing functions) specify how the intermediate values are calculated during the animation.
Supported functions:
  • linear
  • swing
  • ease, ease-in, ease-out, ease-in-out
  • quad-in, quad-out, quad-in-out
  • cubic-in, cubic-out, cubic-in-out
  • exp-in, exp-out, exp-in-out
  • back-in, back-out, back-in-out
  • bounce-xl, bounce-l, bounce, bounce-s, bounce-xs
  • elastic-xl, elastic-l, elastic, elastic-s, elastic-xs
Default is swing.

See Live Demo.

anim_props Specifies the CSS properties of the toggle's wrapper to animate when the toggle should be open or closed.
You will find the same attribute for the toggle_title and toggle_content shortcodes. They allow you to animate all the wrapper element of the toggle, toggle title and content. By default, only the content wrapper is animated, but in some cases, animating the whole toggle or the toggle title can also be useful. For instance when the toggle is a floating panel and clicking on the open/close button (toggle title) moves the panel into and out of the view. In this case, the whole panel should be moved not only its content.
You can see this on our demo page. Open the "Fullsize Single - Right Panel" popup slideshow by clicking on the second image. Clicking on the right arrow at the top of the right panel, moves the panel from -310 to 0 (anim_props="right:{from:-310,to:0}). The theme also includes this slideshow ("Popup - Right Panel" profile).

The following values are supported by the anim_props attribute:

  • empty string: No need animation
  • width: Animate the width of the element. When the toggle is closed, its width will be zero, when it is open, the width will be as normal.
  • height: Animate the height of the element. When the toggle is closed, its height will be zero, when it is open, the height will be as normal.
  • value in JavaScript object literal format: Specifies the properties and their start and end values to animate. See below.
The default value of the anim_props attribute is an empty string (no animation) for the toggle and toggle title, and "height" for the toggle content.

Value in JavaScript object literal format (but without the opening and closing curly braces)

The supported properties are:

  • CSS properties that take length values (width, height, left, top, right, bottom, etc.)
    Examples:
    • top: {from: -200, to: 0} - the top position is -200 pixels when the toggle is closed and 0 when it is open.
    • right: {from: -500, to: 0}, bottom: {from: -200, to: 0} - move from right-bottom (-500, -200) to (0, 0).
    Units can also be specified:
    • top: {from: '-10%', to: '0%'}
  • opacity (values between 0 and 1)
    • opacity: {from: 0, to: 1}
    • opacity: {from: 0.2, to: 0.8}
  • clip - animates the clip CSS property.
    • clip: {right: {from: 0, to: 'auto'}}
    • clip: {right: {from: 0, to: 'auto'}, bottom: {from: 0, to: 'auto'}}
    • clip: {left: {from: -1, to: 'auto'}} - if 'left' is negative, it means the right side of the popup
    • clip: {left: {from: -1, to: 'auto'}, top: {from: -1, to: 'auto'}} - if 'top' is negative, it means the bottom side of the popup
  • trafo - two-dimensional linear transformation, supported functions: moveX, moveY, scaleX, scaleY, rotate, originX, originY
    • trafo: {moveX: {from: 0, to: 100}}
    • trafo: {scaleX: {from: 0, to: 1}, scaleY: {from: 0, to: 1}}
    • trafo: {rotate: {from: 3.14, to: 0}}
    • trafo: {rotate: {from: 3.14, to: 0}, originX: '100%', originY: '100%'}

Please note that if the value of the anim_props property is specified in a JavaScript object literal format, then the styles for the closed state must be set in CSS. It is needed to avoid flickering on page load and it is also needed if the CSS styles are cleared at the end of the close animation (see the clear_anim_props attribute below).

For instance, if the anim_props is left: {from: -200, to: 0}, then you should set the clear_anim_props attribute to "never" and add a custom class to the toggle, toggle_title or toggle_content shortcode (for which the anim_props is set).
Something like this:

[toggle class="my_toggle" clear_anim_props="never" anim_props="left: {from: -200, to: 0}"]
or similarly:
[toggle_content class="my_toggle_content" clear_anim_props="never" anim_props="left: {from: -200, to: 0}"]
Then use this custom class to specify the closed position with CSS:
.my_toggle {
	left: -200px;
}
Or similarly:
.my_toggle_content {
	left: -200px;
}

clear_anim_props Specifies whether the CSS styles used while opening/closing the toggle (anim_props attribute) must be cleared at the end of the open/close animation or not. Possible values:
  • always: clear the styles at the end of both the open and close animations.
  • never: do not clear the styles.
  • open: clear the styles at the end of the open animation.
  • closed: clear the styles at the end of the close animation.
Default is "always".
Attributes supported by the [toggle_title] shortcode.
open_icon Specifies the icon to display when the toggle is open. An empty string means no icon should be displayed. If this attribute is not specified, the open_icon attribute of the container [toggle] shortcode determines the icon.
For a complete list of icons, see Font Icons.
open_iconset Specifies the icon set that contains the icon referred by open_icon (see above). If the value is an empty string, the theme automatically tries to find an icon set that contains the icon. If this attribute is not specified, the open_iconset attribute of the container [toggle] shortcode determines the icon set.
For the supported icon sets, see Font Icons.
closed_icon Specifies the icon to display when the toggle is closed. An empty string means no icon should be displayed. If this attribute is not specified, the closed_icon attribute of the container [toggle] shortcode determines the icon.
For a complete list of icons, see Font Icons.
closed_iconset Specifies the icon set that contains the icon referred by closed_icon (see above). If the value is an empty string, the theme automatically tries to find an icon set that contains the icon. If this attribute is not specified, the closed_iconset attribute of the container [toggle] shortcode determines the icon set.
For the supported icon sets, see Font Icons.
standard Specifies whether the standard CSS styles should be applied to the toggle title or not (true | false). Default is true.
This is a convenience feature. If you need a totally custom toggle title, in some cases, it makes styling easier if you turn the standard CSS styles off.
anim_props Specifies the CSS properties of the toggle title's wrapper to animate when the toggle should be open or closed. Default is an empty string that means no need animation.
For details, please see the anim_props attribute of the toggle shortcode.
clear_anim_props Specifies whether the CSS styles used while opening/closing the toggle (anim_props attribute) must be cleared at the end of the open/close animation or not. Possible values:
  • always: clear the styles at the end of both the open and close animations.
  • never: do not clear the styles.
  • open: clear the styles at the end of the open animation.
  • closed: clear the styles at the end of the close animation.
Default is "always".
Attributes supported by the [toggle_title_closed] shortcode.
closed_icon Specifies the icon to display when the toggle is closed. An empty string means no icon should be displayed. If this attribute is not specified, the closed_icon attribute of the container [toggle] shortcode determines the icon.
For a complete list of icons, see Font Icons.
closed_iconset Specifies the icon set that contains the icon referred by closed_icon (see above). If the value is an empty string, the theme automatically tries to find an icon set that contains the icon. If this attribute is not specified, the closed_iconset attribute of the container [toggle] shortcode determines the icon set.
For the supported icon sets, see Font Icons.
standard Specifies whether the standard CSS styles should be applied to the toggle title or not (true | false). Default is true.
This is a convenience feature. If you need a totally custom toggle title, in some cases, it makes styling easier if you turn the standard CSS styles off.
Attributes supported by the [toggle_title_open] shortcode.
open_icon Specifies the icon to display when the toggle is open. An empty string means no icon should be displayed. If this attribute is not specified, the open_icon attribute of the container [toggle] shortcode determines the icon.
For a complete list of icons, see Font Icons.
open_iconset Specifies the icon set that contains the icon referred by open_icon (see above). If the value is an empty string, the theme automatically tries to find an icon set that contains the icon. If this attribute is not specified, the open_iconset attribute of the container [toggle] shortcode determines the icon set.
For the supported icon sets, see Font Icons.
standard Specifies whether the standard CSS styles should be applied to the toggle title or not (true | false). Default is true.
This is a convenience feature. If you need a totally custom toggle title, in some cases, it makes styling easier if you turn the standard CSS styles off.
Attributes supported by the [toggle_content] shortcode.
standard Specifies whether the standard CSS styles should be applied to the toggle content or not (true | false). Default is true.
This is a convenience feature. If you need a totally custom toggle content, in some cases, it makes styling easier if you turn the standard CSS styles off.
anim_props Specifies the CSS properties of the toggle content's wrapper to animate when the toggle should be open or closed. Default is 'height' that means that when the toggle is closed, the height of the content will be zero, when it is open, the height will be as normal.
For details, please see the anim_props attribute of the toggle shortcode.
clear_anim_props Specifies whether the CSS styles used while opening/closing the toggle (anim_props attribute) must be cleared at the end of the open/close animation or not. Possible values:
  • always: clear the styles at the end of both the open and close animations.
  • never: do not clear the styles.
  • open: clear the styles at the end of the open animation.
  • closed: clear the styles at the end of the close animation.
Default is "always".
By default, the height of the toggle content is animated (anim_props attribute) and the height is cleared at the end of the open animation. It means that the height will be "auto" () and not a pixel height. It is useful if the height of the toggle content can be changed. For instance, if there is an another toggle in it.

Live example