Mailocator supports custom attributes to toggle CSS classes based on a user triggered event such as a click, touch or hover. In the background, compatibility between touch and desktop devices is automatically provided, so you don't have to handle a complex set of events.
The whole mechanism is to add a class or remove .is-on when the user raises the desired event.
This mechanism can be used for dropdowns, pop-up infoboxes, and many other cases.
This feature has been available since Mailocator 5.1.0.
on-click : toggle CSS on click
This event adds the is-on class if it is not on the element and removes it if it is.
Setup procedure in the Editor:
select the element to respond to a click or touch
in the left panel select Inspector
in the Attributes section, add the on-click attribute, whose value will be the address of the element (class, id, ...) to which the .is-on class will be added after the click. If a class is added to the same element, specify 1 as the value.
Example of code that adds or removes the on-touch class to the main element when DIV is clicked:
Setting up toggling in CSS using a class definition is-on
/* Make main content partially hidden */
ml-main { transform: translateX(90%) !important; }
/* Reveal main content if user click on element */
ml-main.is-on { transform: translateX(0) !important; }
To activate class switching using the attribute on-click:
<div on-click="ml-main">Click to make content visible</div> once-click : one-time switching after the first click
Same event as on-click, which responds only to the first click, the others are ignored.
on-touch : change CSS on cursor or hover
This event adds the is-on class to the defined element.
select the element to respond to a click or touch
in the left panel, select Inspector
in the Attributes section, add the on-touch attribute whose value will be the addressing of the element to which the .is-on class will be added during this event.
off-touch : change CSS after leaving the cursor or releasing the touch
This event removes the is-on class from the defined element.
proceed as in the previous step
in the section Attributes add the attribute off-touch, whose value will be the addressing of the element whose class will be removed during this event .is-on.
Combination
Events can be combined, e.g. to expand the content when the cursor is hovered over, but only allow collapsing by clicking.
Example of code that combines two events:
<div on-touch="ml-main" on-click="ml-main">Click to make content visible</div> The on-touch event adds the .is-on class.
The on-click switch event removes the .is-on. class because it exists from the previous event