Unfold / Read More Element / Setting

Hey, one & all,

It would be great to have an unfold element or option.

Sometimes you need large pieces of text which look ugly, and it would be good to show a paragraph of it and then have a click to unfold/read more. Once clicked, it would reveal the rest of the text if the visitor wishes to continue reading.

Not sure what is the best way to achieve this? I am not a fan of a CSS display none option as not sure if this is bad for SEO as Google will see this text as not visible, so they may discount the text which may be needed to rank.

3 Likes

@Michael

you actually can build it you self using the custom tags for the containers like “details” and “summary” resulting in something like this:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren:

  • test 1
  • test2
  • test3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

1 Like

Thats awesome @Markus cheers! Sorry for being a little dumb, but how did you achieve this? Do you mean using custom classes?

1 Like

the custom html tag is a container property . so you can basically assign what ever tag you want / need.

https://www.w3schools.com/TAGS/default.ASP

6 Likes

Ah got it! That’s awesome thank you! I really appreciate it :+1: :clap:

2 Likes

This only works well for a container, but creating a bunch of containers on a page hurts optimizations, what do I mean? Suppose I have such a hero section (right, I have a picture on the left, I have a title + text + a button) this is 1 container (section) (css flex settings, warp: warp) + another container (50% width) (for the title + text + buttons) to the image widget (50%), then I add another container (100% width) to it, I want to add a title in the middle and a large text block (for example, a text about us) and I would like to be able to expand it like this how big it is, but behind it I want to add a title and 2 blocks (with prices or benefits) I can implement all this using everything exactly as I described, but if I tell the container that the summary tag has 100% width, I will hide and the second heading with blocks of prices or advantages, so the presence of options to hide and show is considered relevant, because if you use the option from the container it generates a lot of unnecessary code, but why do you need it?

1 Like

That’s great! Thank you very much for that! I didn’t know about these tags until now. Is there any way to add a transition to make the movement smoother?

1 Like

Ok. Found something on Transitions. In case anyone is interested:

https://stackoverflow.com/a/67814400/6466083

1 Like

Hi @Markus !

Is there any way to change icon on pseudo-element ?

I want to achieve a custom icon (for example from fontawesome icons) AFTER the summary

Thanks in advance for your support!

1 Like

please guide me, i don’t understand

1 Like

Would be nice to have an unfold element though! :smiley:

Hello Guys! Good News :+1:
I found out how to build this Unfold - Read More Element :heart_eyes:
I made it with a nested accordion element and some easy code. For a loop you need to query the container with the class “accordion”
Maybe the Bricks Guys could implement it easily as native Unfold Element
Obviously its not possible to upload a file here so here is the link to the json template

Let me know if its possible to make it even better!
Down you can see the picture of the template (first picture) and the other pictures are an example what i achieved with the unfold function.
It is not just a random summary / details stuff its a modified nested accordion so you can build whatever you want inside. In the Code Element you can find the CSS and JS that i applied. There you can change the colors, height and whatever
Have Fun
Best Greetz
David



2 Likes