How to 'open' and 'close' a jQueryMobile "Collapsible" at run time?

21

There are 8 Collapsibles on the form… id’s go from “CbF1a”…to … “CbF1h”.
Since the intent is to collapse one (in this example, CbF1a) when another (CbF1h) is expanded.

This explains what I’m trying to accomplish: What I’m trying to do is have the previous expanded Collapsible(Cb) collapse when a NEW Cb is expanded… My intent is to store the ID of the expanded Cb in a variable, then when ANOTHER Cb is expanded, the function we’re trying to make work (collapse a Cb at run time) will collapse the Cb whose ID is stored in the variable.

22

George, the onclick() function does not work…
I used:

Function CbF1h_onmousedown()
$("#CbF1a").collapsible("collapse")
End Function

and it works perfectly.

23

Sorry to say that the surgery was successful but the patient died…

See the test program SMNTestPrototype.nsx (50.9 KB)

The Expand and Collapse work… BUT, using the attached test program, the ONLY event option in Collapsible(Cb) (jQueryMobile) that enables a click on a Cb resulting in the CB expanding, and staying expanded, and all others collapsing is the ‘onmove’ event (NOT acceptable to require the user to move a control every time they want to open it!) the other events result in all the Cb’s to collapse (as they should), but then the clicked Cb expands and immediately collapses when mouse is let up.
Obviously, jQuery is taking over somehow.
The design issue I’m trying to solve is this: When a lower (down the Form) Cb is LEFT open by the user and then a higher up on the Form Cb is opened, some content of the first (lower) Cb can show up under the second Cb that was opened. This is not a ‘show-stopper’ for the apps, but it’s ‘sloppy’ and for at least one tester, caused a problem… he thought the paragraph that showed (from the first Cb) was part of the second Cb and therefore was executing steps in the process out of order.
Sorry, guys, all of this back and forth discussion has been in vain.

24

I dug in to the documentation and found something which might be useful - there are a couple of additional events:

Function Collapsible1_oncollapsiblecollapse ()

Function Collapsible1_oncollapsibleexpand()

http://api.jquerymobile.com/collapsible/#event-collapse

25

I played around with your SMNTestPrototype and simplified it a bit. this works:

Dim v_collapse
v_collapse=""
Function CbF1b_onmousedown()
   $(v_collapse).collapsible("collapse")
   v_collapse="#CbF1b"
End Function
Function CbF1c_onmousedown()
   $(v_collapse).collapsible("collapse")
   v_collapse="#CbF1c"
End Function
Function CbF1d_onmousedown()
   $(v_collapse).collapsible("collapse")
   v_collapse="#CbF1d"
End Function
Function CbF1h_onmousedown()
   $(v_collapse).collapsible("collapse")
   v_collapse="#CbF1h"
End Function

It is unnecessary to expand the collapsible in code - jqm takes care of that.

Helen

26

George, using this event resulted in error:

Uncaught RangeError: Maximum call stack size exceeded.
line 4 column 850
27

just replaced “…onmousedown()” with “oncollapsiblecollapse ()”

28

Sounds like an endless loop.

29

Hip-hip-hooray!.. Got it!

Helen (2 posts above) said that it was not necessary to issue an …‘expand’ command since jQ handles that…

So I modified my code by just deleting the expand line and it all worked as it should!!!

Here’s the modified code for the first 2 Collapsibles:

Function CbF1a_onmousedown()
FuCloseCb()
'$("#CbF1a").collapsible("expand")
End Function
Function CbF1b_onmousedown()
FuCloseCb()
'$("#CbF1b").collapsible("expand")
End Function

Thank you, Helen!!! and thank you everyone else for hanging in there!

George, it might be reasonable to put this in the Wiki for the Collapsible… it’s the routine to collapse all other Cb’s when a new one is expanded… a very useful capability for lover’s of the Collapsible control (like me)

30

George, I’d be happy to write up a draft, but do not know how to put it into the wiki… let me know and I’ll have it for you later today… Tom

31

Good job!

The Wiki is designed to be user editable. Create a login account, then edit the page as needed. A number of users do this already.

32

Celebration was premature :disappointed_relieved:

Using BOTH my version HELEN’s version works great until one tries to collapse JUST the CURRENTLY expanded Cb… it won’t collapse… the ONLY way to collapse a Cb that is expanded is to expand another Cb. And, because subsequent Cb’s are UNDER (hidden by) previous expanded Cb’s above it, the user can’t get to the subsequent Cb’s unless they click on a LOWER Cb… unacceptable.

Note, there is another way to close the currently expanded Cb, it is to click and drag the Cb slightly… it then collapses. (NOT a realistic GUI). But maybe it’s a lead for a real solution? I don’t have the experience/expertise to do that follow-up.

Unless someone can figure out how to do this, I’m giving up on THIS FUNCTIONALITY in the apps and will have to depend upon the user to close a Cb when they are finished with it…

I have personally learned a lot going through this, so not all is lost!

Tom

33

Tom, you can add a button to your form that calls your close all function. If you give it the value “Close All” it will be clear to your user.

Function Button1_onclick()
   FuCloseCb()
End Function

Helen

34

Thanks, Helen… where to put the button? If it’s in the header, above the first Cb, then, at least the first time user, they’ll wonder what it is… If I put it after the last Cb, it could well be hidden by an Expanded Cb…
I could put a button named “Close” at the bottom (after the content) of EVERY Cb that would close all Cbs… that actually makes sense, since some of the Cb’s are more than a screen in length and user has to scroll up to be able to close it… (Same problem if the ‘close all’ button is at the top of the form…) Hmmm… Helen, thanks for the suggestion because it’s triggered a solution that may just work… Thanks!

Tom