Accordion with popup

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.

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.

1 Like

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

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:

@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

2 Likes