How to Show/Hide HTML elements with Conditional Rules

Toggle between hiding and showing an element with Conditional Rules is very easy, just follow these two steps:

1. Add a selector to the HTML elements

For Headings and Paragraphs, go to the Form Builder and add a Container CSS Class, for example: toHide

For HTML Snippets, go to the Form Builder and enclose your HTML code between an element with the selector, for example:

<div class="toHide">
My custom html element
</div>

2. Show/Hide the Elements by using their CSS selectors

Finally, go to Conditional Rules and add a new rule with the following action:

Hide Element .toHide

Note: Consider that we added a dot to the CSS class to identify it as a CSS class, because it is a jQuery selector.

That’s it!