This document will walk you through how you can use the clevr Form Editor to configure show/hide.
Show / Hide
When using show/hide sections to avoid blank space where the hidden section is located you can use slider control.
When using an id on a container it has to be unique.
Show/Hide based on Dropdown Value
In the top container update the attribute and values as shown below.
var a=$(this); if (a.val()=='Yes') $.clevrShowHide('165:show'); if (a.val()=='No') $.clevrShowHide('165:hide'); if (a.val()=='') $.clevrShowHide('165:hide');
In the 2nd container update the attribute and values as shown below.
Multiple Show/Hide Dropdown
If using multiple show/hide dropdowns within containers there must be no repeaters within the container. All containers must be touching each other displayed vertically.
var a=$(this); if (a.val()=='145') $.clevrShowHide('145:show;146:hide;147:hide'); if (a.val()=='146') $.clevrShowHide('145:hide;146:show;147:hide'); if (a.val()=='147') $.clevrShowHide('145:hide;146:hide;147:show'); if (a.val()=='') $.clevrShowHide('145:hide;146:hide;147:hide'); if (a.val()=='146 & 147') $.clevrShowHide('145:hide;146:show;147:show'); if (a.val()=='Show All') $.clevrShowHide('145:show;146:show;147:show');
All associated containers must have an id.
Show/Hide based on Checkbox
In the top checkbox update the attribute and values as shown below.
var a=$(this); if (a.is(':checked')) $.clevrShowHide('155:show'); else $.clevrShowHide('155:hide');
In the 2nd container update the attribute and values as shown below.
Nested Show/Hide
A nested show/hide is a container set within another container with the ability to show/hide based on value selected. To create a nested show/hide add the attribute level and the level of show/hide to the regular attribute and value settings required for show/hides. You do not need to have a level 1 as that is assumed.
