After your last post, it occurred to me it might be more elegant to actually nest your accordion levels (dynamic panels) within each other–truly making child accordions within a parent accordion, and use a padding widget at the bottom of everything to control the size of the border background. It turns out this can greatly simplify the code and math to accomplish moving and resizing things.
Take a look at Page 1 of this updated file:
accordionwithinaccordion.rp (136.5 KB)
Here is the basic structure of this method:
- Your “DP_Accordion1” is the parent accordion
- I kept the two states, Closed and Open
- Nested in “DP_Accordion1 (“Open” state)” is “Accordion 1A” (which also has two states of Closed and Open)
- Also in “DP_Accordion1” is a rectangle widget named, “padding1” with no border and no fill (so not visible, but also not truly “hidden”) and set to a height of 15 px (the amount of padding you show below “DP_Accordion1A”)
- All the dynamic panels have “Fit to Content” on. so they automatically resize when states change.
The basic behavior is:
- Clicking on a dynamic panel (the title area at least) changes the state to “Next, push/pull widgets below, wrap” to toggle the states between Closed and Open and move other items accordingly. (I removed all the OnClick events for the widget groups inside the accordion dynamic panels, so the clicks are handled at the dynamic panel level.)
- When “DP_Accordion1A” changes states, it will push/pull “padding1” to maintain the padding needed. In other words, “padding1” should thus always be immediately below “DP_Accordion1A”.
- “padding1” has a OnMove event to “Set Size of background1 to (blank) Width x [[This.bottom]] anchor top” thus ensuring the border height can increase and decrease as needed so it is always at the edges of the dynamic panel. (RP9 has ability to style dynamic panels with fill, border and radius so this isn’t needed there.)
- This last bit–a padding widget with an OnMove event to resize the border is the key to making this nested accordion work in RP8. Just keep it at the bottom of a parent accordion.
To test this out, I copied everything in Page 1 to Page 2 and then duplicated “DP_Accordion1A” to add a “DP_Accordion1B” --and of course, placed “padding1” below all this. Voila! it works.
