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.
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,
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?
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?
