Unfolding text elements

Dear community,

is it possible to create text buttons that are unfolding upon clicking or hovering?

The ideas is that you have a headline and when you click on it, then the explanation text appears below (or wherever).

So you have a list of text elements and clicking / hovering on one expands the selected one and information appears.
Ideally the rest of the list is pushed away to make space for the new text.

The idea is to have this without a loading of a new page.

I hope my writing is somewhat understandable. Unfortunately I couldn’t find an example in the web (as usual when you are looking for something, it can’t be found).

If you could give me an idea how to realize that, it’ll be great.

Thanks a lot!


Hello @Herbert

I think what you mean has been discussed here …


Indeed it has… it has also given me the appropriate terminology. Thank you!

It also shows that is has already been discussed.

Thanks for the link!

Hello @Herbert

You’re welcome, I’m glad you found this link helpful.

Greetings to Austria :austria: … from Switzerland :switzerland:

Hi, I am new to Sparkle and love the flat learning curve mixed with neat features!

I am currently running into the same problem: I have text with background information which may not interest every visitor and would crowd the page. Therefore I am looking for a way to create a textbox which opens as an option without having to go to a new page.

Similarly I would like to place product pictures with hotspots that you can click and get info about what you are looking at.

Is there an easy way to accomplish one or both with Sparkle? Accordions are not really what I have in mind, rather a button that which will fade in a textbox over the page content (while possibly fading or displacing text beneath it).

Hi @HeadLines, neither is currently possible in Sparkle.

Thanks for the quick answer, Duncan! I could only find scroll animations and was missing an option in the klick menu which would not link elsewhere, but animate that element. I presently cannot think of a work-around except to put the additional text out of the way at the bottom of the page and link to it with a scroll point. But that has the drawback of loosing the reading position on the page unless I also link back to that…

@HeadLines, I can make a couple of suggestions…

  • With your content it is a matter of knowing your ideal client which will make the content easier to write and display instead of pleasing all
  • The hot spot trick well how about this… You have an image and you place say two buttons. You can have “+ this is information”. The button is transparent and the font is the colour of the canvas colour (say white) where the “+” is visible on the image. When I hover over the “+” the button appears with the text now in black setting on white… a hack-hotspot! :slight_smile:
1 Like

Absolutely cool idea, @greenskin! Can’t wait to try that!
People tend to be too lazy to read a lot. Unless, that is, you can get them interested. Enganging them by allowing for active exploration of the page is a way of accomplishing that. They may say “arrgh!” when they see a bunch of text and go somewhere else, but if there is just a little, that motivates them enough to want to find out more…
Of course this does not work for every type of website.


1 Like

OK, I have been playing with this for a while, but this trick could be made quite a lot more applicable with some easy changes. May be solutions already exist for two problems I ran into:

  1. It would be oh so much easier if only you could specify at least two text colors in a button! This way a title could be visible and the remaining text would show upon mouse-over. No need to fiddle with pictures!
  2. I could find no way to prevent the text from running all the way out to the edge of the button. Is there no way to set a margin?

For certain types of extra text, accordions actually would be ideal. Say you want to introduce several topics on a page and not bother visitors with too much detail on first view. Accordions would allow them to view background information only on those topics of particular interest to them. You could pack a lot of information on one page (wich Sparkle is actually great for) and yet not clutter it. @duncan: I have read that you don’t think too highly of accordions in some contexts, but would it not be a great feature in some others?

I stand by my previous answer on the topic.

No I don’t think there is any context where hiding text from the user is a good thing, or where having to manage the presentation of text is superior to scrolling.

1 Like

Thanks for the quick reply @duncan – that was your answer I was actually referring to. And the point about the terrible experience on a mobile is well made indeed!

In this context I would be interested to know how you feel about sideway scrolls. They work well on mobiles and also provide a way of offering additional information without forcing it upon the visitor.

I have no direct problem with classic multi-page layouts, but I wonder if a mindmap structure may not be more effective without so many page breaks, allowing for a more flowing and explorative experience?

@HeadLines, I wouldn’t mind seeing a “canvas-section” type concept where you could have three sideway sliding canvases making up the element. It would be like the image gallery but with content and images and I wouldn’t see it as a disadvantage on tablet and mobile.

But I do agree with Duncan on the accordion - for most part (and especially on mobile) I don’t see it has an advantage but more about placing extra steps in front of the potential client.

1 Like

@greenskin @duncan This to my thinking is actually what I would want. Infact in my latest design I have used the image gallery for a customer review section of the business. It’s a pain to do using images so the idea that in Sparkle a gallery that could use text, boxes or want ever content that was needed would be brilliant.