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!

Herbert

Hello @Herbert

I think what you mean has been discussed here …

https://community.sparkleapp.com/t/any-chance-of-a-text-accordian-toggle-module/775

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.

Thanks!

1 Like