Dottoro Theme Documentation

• _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.

For further details, please see the section_class attribute below.

• open: the toggle is open
• opening: the toggle is during opening
• closing: the toggle is during closing
• closed: the toggle is closed

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".

• 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

See Live Demo.

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 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%'}

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}"]

[toggle_content class="my_toggle_content" clear_anim_props="never" anim_props="left: {from: -200, to: 0}"]

.my_toggle {
	left: -200px;
}

.my_toggle_content {
	left: -200px;
}

• 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.

• 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.

• 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.