You can apply on-click interactivity to elements using two methods: Toggle modifier class and Toggle jQuery animation. These interactive options are available on all elements that include the Link and interaction properties. The most common elements used with these options are Button, Link and Container.
You can use Toggle modifier on Buttons, Links and Containers to add and remove a class from an element on-click.
You can apply multiple Toggle modifier interactions using the Add modifier button in the bottom right of the Toggle modifier section.
You can apply CSS transitions to an element so it animates smoothly from its default appearance to its appearance when a modifier is applied.
To ensure the transition only applies when the modifier is applied and not in other situations, for example when the browser is resized or the page first loads, Site Studio includes a specific transition class coh-transition. This class is added when a modifier is applied at the start of a transition and then removed at the end of a transition.
To ensure a consistent transition works consistently when modifiers are applied:
You can use jQuery animations on Buttons, Links and Containers to animate an element on-click.
Toggle jQuery animation is available by breakpoint. This allows different animations to be set at different screen widths. You can also add multiple animations using the Add animation button in the bottom right of the Toggle jQuery animation form.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Mar 26 2025 01:05:57 GMT+0000 (Coordinated Universal Time)