Setting up a conditional visibility of input fields

The conditional visibility of a calculator’s elements lets you both hide or reveal specific input fields or calculator components, depending on the results or values entered into other input fields. When a condition for a specific field is true the field becomes visible – if not, it remains hidden.

Check out our example of an interactive calculator with conditional visibility feature: Interactive CO2 emission calculator by Calconic. Try pulling on the slider or switching between different radio box choices.

This article shows how to set up the conditional visibility of calculator's input fields. Let's say your calculator consists of two input fields (a numeric input field and slider) and a formula element. And let's say that you want to have the slider shown only when number entered to the numeric input field is greater than 10. Let's get started:

1. Click the Slider element.
2. Click the Advanced tab on the right.
3. Toggle the switch below the Enable conditional element visibility label to the ON position.
4. Set the default value that will be used in calculations when the element is hidden.
5. Click the Add Rule button.
6. Click the first select field to extend the list of calculator's elements and choose the #1 option.
7. Click the second select field to extend the list of and this time choose the More than (>) option.
8. Enter 10 to the third input field. *note that this input field can have only numeric values or element references.
9. Done! Your visibility rule for the slider is set. It reads: show the slider when the number entered to the input field (with ID - #1) is greater than 10.

You can set more visibility rules the same input field by clicking the OR and AND buttons below. As well you can group the rules by using brackets.