Accordion with popup

[Swedutch]

Is it possible to create an accordion with the popup function?
And how would this work?
I know that some of you are not happy with an accordion and sometimes it is necessary to do so.
Help is appreciated.

[duncan]

You can have a popup appear on click (or hover, for buttons). Accordions are typically structured in a way that opens/closes the inner text, pushing content down (and up when closing). That can’t be reproduced exactly. But you can have a popup that overlaps some of the text below it (instead of pushing it), or have all popups for all appearing text be in the same place, so as you hover the source text, the other content appears say on a side.

[Swedutch]

There are scripts but I cannot seem to make them work.
Do I have to have the developers tool for that?
I want the left one of these two:

I will figure something out if this is absolutely not possible to implement.
Thanks

[duncan]

We do have many requests for accordions, there are many problems with it:

• Sparkle’s layout engine doesn’t work as well as it should with content expanding in the live page
• Accordions are the lazy designer solution to doing the proper work, they feel legit user interface because they’re so widespread in coding tools (spoiler, they’re not)
• Accordions have annoying UX issues particularly on devices with small screens, due to how stuff moves on the page

Something most people don’t realize is that while the straightforward use of a Sparkle element is straightforward for us to build, edge case are 10x the work. We try to support edge cases as much as possible, because they make Sparkle feel freeform and supporting creativity. It doesn’t feel like there’s a limit to what you can do (within the declared constraints). I feel the accordions present a huge amount of complexity and edge cases to support, while having the faults I described.

About the code you want to use, the same previous answer applies:

Snow for Christmas

You are welcome to integrate code, unfortunately every code problem is different and most of the time the path is really really narrow, all the details need to be exactly right. This complexity is precisely why we built Sparkle to be a visual website builder, we are unable to delve into coding issues even just from a simple amount of time point of view. I full acknowledge that Sparkle doesn’t do everything, and that a little code occasionally helps, but we can’t really go beyond that.

[rimram]

@Swedutch I have created a Tabbed content example, not accordion but it could be adapted. Feel free to use and experiment with!

Download the Sparkle Project form here

Best,
Scott

[transparentmediapro]

Great job on the Tabbed content! It looks and works flawlessly.

[rimram]

Sorry for a late reply! Thank you, hope it is / was useful.

Best
Scott