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.