How can I use buttons to trigger events?

Hi, this is Sandra from GREYD. I’d like to show you today how to use for example buttons on your website to trigger events, like hiding or showing something. To create such a trigger event, you need two modules: first the element to which the event should apply. You can work with content boxes or templates here. And in your content box or template you place your content as usual. I’ve already prepared some example content.

Then you open the tab “actions” in the content box or template, create an event and give a unique name to your trigger that you can reference later in the trigger picker. Then you define what should happen with your content box or template when the trigger is clicked. You have different possibilities to hide, show, open or fold your element. And if you use single actions like hide or show, the event can only be triggered once. For example, you can use it to show an element which will then remain visible. Otherwise you can use one of the double options. With those, the trigger button can be used several times and will alternate hiding and showing the element with each click.

Down here you define the starting state when the page is loaded. If you are using a single action, you should select the opposing event here. For example, if your action is “show”, then the initial state should be “hidden”. Otherwise nothing will happen. The last option here enables you to also trigger neighboring elements, for example if you have several content boxes in a column, you can hide all of them as soon as the triggered content box is shown.

And that’s it already. Now we need the trigger itself. We therefore use our featured trigger picker, which is available for example for buttons or content boxes. Select the option “trigger event” and then select the trigger we’ve just defined or enter a new one. Here you can also trigger already on hover. And this last option here triggers the event page-wide, which is important for example if your trigger button is placed in a template whereas the trigger event is placed outside the template.

For more videos and information please visit our Helpcenter.