Accordion within Accordion (Sandwich method issues)


I’m trying to get an accordion within an accordion working but i’m having issues. I have a localvariable (rather than global since I’m adding this to a library) to resize the background of a certain accordion element. Everything works fine if I was to open things and close things in sequential order but the problem arises when I have Accordion 1 open and Accordion 1A open then I try to close Accordion 1. What happens is that Accordion 1 gets pushed down when closing it.

Anyone know what the solution to this would be?

accordionwithinaccordion.rp (69.2 KB)


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.

Hi @mbc66

The issue with your solution (and the reason I didn’t have a dynamic panel at the start within another dynamic panel) is that the panel inside the other panel won’t push / pull content that’s below in the original state of the page. So for example, if you put a random paragraph under Accordion_1, it will push and pull just fine when you open Accordion_1 but once you open or close Accordion_1A or Accordion_1B it’ll just overlap that content.

Thanks for taking the time to help.