Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

How to make a subform expand AND contract?

Avatar

Level 4

Newbie here. Maybe I'm approaching this from the wrong direction. Hopefully someone can provide me with the proper method.

I have created a series of subforms which I'd like to initially display as hidden with only a "header/button" visible for each subform. Each subform visible/invisible header object is a button which, when run, should give the form a cascading tab effect. What I'd LIKE to see happen is this: When the user clicks the button, the subform becomes visible, pushing all other header object buttons further down. However, when the visible subform button is pushed again, the subform content becomes invisible and the subform collapses back to the original form (with all user provided content remaining intact, but that's not the issue here). The problem is that I can "sort of" get this to work using the xxx.presence = "visible"/"invisible" method, but upon invoking the "invisible" part, the space where the content was showing still remains; the subform doesn't collapse.

A related issue with this is: If I use a checkbox, the result is as I described above. But if I use a button, the subform opens but all the objects in it remain invisible.

Is that the proper way to achieve this? Indeed, can a collapsible subform retain input data? I haven't even got that far yet. :-)

Thanks!

Graham

7 Replies

Avatar

Level 4

As my English friend would say, "That's brilliant!"

Thanks Paul, all the scripting language possibilities are new to me.

Graham

Avatar

Level 4

...any thoughts on why it works as a check box, but not as a button?

As a button, the subform expands, but the content doesn't render.

Graham

Avatar

Former Community Member

I woudl have to see the form to see what was happening. Can you post your form?

Paul

Avatar

Level 4

I've been considering this issue, and have realized that buttons haven't got an on/off state like a check box has.

The "General Information" bar has a button lying on top of it.

Is there some way to work this so it acts like a check box, only it can be any size and does not have a visible on/off state like the checkbox has when it's in the on state with an X.

Avatar

Level 10

File still queued so haven't seen it yet but...

You could set it up where clicking the button updates a hidden field which you can then check the value of and use an if statement to handle the on/off.

Avatar

Level 4

I have figure out a way of doing what I wanted to achieve, a tab which would open and close the subform... basically two identical buttons, one aligned on top of the other. When the top button fires, it hides itself and unhides the other as well as unhiding the subforms, the other button, when fired hides itself, unhides the first button and hides the subforms.

I have a related question though.

Identical if/else statement is not very elegent, for sure, and I am wondering if there was another way to do this.

Here is what my JS code looks like:

I included hashmarks here because this is the first time I've put JS code in a forum message, and I'm not sure how it needs to be delivered in order to be displayed correctly.

//if (this.rawValue == 1)
//Btn1.presence = "invisible", Btn2.presence = "visible", SEC_01.presence = "visible", SEC_01A.presence = "visible";
//else
//Btn1.presence = "invisible", Btn2.presence = "visible", SEC_01.presence = "visible", SEC_01A.presence = "visible";