Jump to content
  • 0

Collapsible Sections based on Caspio Dropdown



I am not very experienced with Javascript.....but I have a need to use collapsible section based on a dropdown list.  I found the thread using a checkbox but am struggling to get and interpret the value of the selection .  I want to use the value of the selected dropdown field to drive which sections of my Submission Form data page are visible. Could someone help me with some sample code please?  Thank you!

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

What kind of datapage is this for? Is it a Submission Form?

I think you might be able to do this without JavaScript. When in the DataPage Wizard, use the Rules section.

In the Rules section, create new Criteria. This will contain the dropdown selections. Notice how on my Criteria, I have a 'Job Type' field that could hold multiple values. 

Next, the Action section. This is where you hide the sections you want hidden. In my current workflow below, you can see that if 'Job Type' equals any of the listed values in Criteria, then Section 2 of my form will be hidden. If Job Type is any value not listed in Criteria, Section 2 will be shown.

It is a good idea to split up the form/report with Sections, as you can only use ONE field per Action. So, if you are hiding a field and try to make another rule with that same field, it won't work. 

If you need more help let me know!

Screenshot (260).png

Link to comment
Share on other sites

  • 0

Thank you.  I saw this type of form logic, but it does not seem to do what I am trying to accomplish because once i "Hide" a section using a rule based on one value of the drop down, that same section, which was not applicable to the option chosen,  is not available to display when a different option is selected.  I am attempting to make one Submission form that only displays fields that are applicable to the option chosen in the dropdown.  Here is what I have.

The field I am using as drop down that will drive the fields I want to have displayed is called Appt_Type and its a dropdown with both custom and lookup table values.  

When the user selects option "A",  only want fields 1,2, and 3 displayed so I put these in Section 2.

When the user selects option "B", only want fields 4,5, and 6 displayed so I put these in Section 3.

When the user selects option "C", only want fields 7, 8, and 9 displayed so I put these in Section 4.

and so on...

I then created a rule that says when Appt_Type is Equal to Value A, hide Section 3, 4, etc.

But it seems that the first time you take action on a section, you cannot code any more logic around that section.  I do not know of a way to make all of the sections hidden to then use a rule to "unhide" that section based on the value chosen.

I was originally trying to use Collapsible sections to make use of the HTML hide and inline examples I saw in the help around Collapsible sections....but I can not figure out how to get the value of the Appt_Field drop down to use in the Javascript script I had in the footer.

Again, i am not very experienced in this stuff, so any redesign or help figuring out either the conditional form design or collapsible section design would be greatly appreciated.

Thank you again for any help.


Link to comment
Share on other sites

  • 0
1 hour ago, sptclay66 said:

I then created a rule that says when Appt_Type is Equal to Value A, hide Section 3, 4, etc.

Try to spread out the actions. So, instead of having one rule with A in criteria and Section 3, 4 in Action, go with 2 rules. One where the action is Hide Section 3, one where the action is Hide Section 4. Then, for Criteria, list all dropdown values that should have that section hidden.

Rule 1:                                                            Rule 2:                                                               Rule 3:

Criteria: B, C                                               Criteria: A, C                                                 Criteria: A, B

Action: Hide Section 2                          Action: Hide Section 3                             Action: Hide Section 4

And so on.. if there is another dropdown value needing to hide the 3rd section, add the value to Rule 2's Criteria.


When I get a chance Ill write up a dummy page to show you.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...