Hide Unhide div field

Hello @hheyhey568

You can define the DIV fields as dependent on the choices in the checkbox field. Please, read about the use of dependencies visiting the following link to the plugin’s blog:

https://cff.dwbooster.com/blog/2020/03/01/dependencies/

Best regards.

Thanks , however my requirement is different. Input field will remain there only. It is just expanded or collapsed so that page looks short and clean.For example:

following are number fields inside DIV field.
fieldname1
fieldname2
fieldname3
fieldname4
fieldname5
fieldname6
fieldname7

User provides the value to each field. But after providing value , user click hide or collapse so that these fields will get hidden but these field will remain active in the calculation with whatever input value user had provided before hiding it. If user click to unhide or expand , all above field will be unhidden and come back on page.

Hello @hheyhey568

In this case, you should customize the form’s behavior by coding.

Assign custom class names to the div fields through their attributes: “Add CSS Layout Keywords”, for example: my-div-1, my-div-2, my-div-3 (and if you want these Div fields be hidden by default: my-div-1 hide, my-div-2 hide, my-div-3 hide)

Now, assuming you want to show/hide these fields by ticking the checkbox fields: fieldname1, fieldname2, and fieldname3 respectively.

* Insert a calculated field in the form as auxiliary (you can hide it by ticking a checkbox in its settings), with the following equation:

(function(){
if(fieldname1) jQuery('.my-div-1').removeClass('hide');
else jQuery('.my-div-1').addClass('hide');

if(fieldname2) jQuery('.my-div-2').removeClass('hide');
else jQuery('.my-div-2').addClass('hide');

if(fieldname3) jQuery('.my-div-3').removeClass('hide');
else jQuery('.my-div-3').addClass('hide');
})()

The fields and class names above are hypothetical, but they allow us to understand the process.

Best regards.

Thanks a lot..