Unfold / Read More Element / Setting

[Michael]

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.

[Markus]

@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,

[Michael]

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

[Markus]

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

[Michael]

Ah got it! That’s awesome thank you! I really appreciate it

[davidovmihail]

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?

[electricarts]

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?

[electricarts]

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

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

[lapocerchiai]

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!

[justdoit]

please guide me, i don’t understand

[Frencharme]

Would be nice to have an unfold element though!

[Frencharme]

Hello Guys! Good News
I found out how to build this Unfold - Read More Element
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

template-unfold-read-more-template-2024-10-25.json

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

[hosi]

Nice to have this and thank you about this.
Is it possible to jump back to Up after the collapse function? In a very long content it cause bad UX.

[hosi]

Based on the code provided by @Frencharme , I customize it for two goals with help of chatgpt:

1. I have a sticky header with fixed height of 100px (so I need 120px space from the top)
2. I have a long content and wanted to smooth scroll to top of the content ( with ID #post-content) after second toggle.

and here is the updated JS code for this:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.accordion-toggle').forEach(function(toggle) {
        toggle.addEventListener('click', function() {
            const item = this.closest('.accordion-item');
            const content = item.querySelector('.accordion-content');
            
            item.classList.toggle('active');

            if (item.classList.contains('active')) {
                // Expand the accordion
                content.style.maxHeight = content.scrollHeight + "px";
                this.textContent = 'See less';
            } else {
                // Collapse the accordion back to partially shown height
                content.style.maxHeight = "250px";
                this.textContent = 'See more';
                
                // Smooth scroll to #post-content with additional 120px offset
                setTimeout(() => {
                    const targetPosition = document.querySelector("#post-content").getBoundingClientRect().top + window.pageYOffset - 120;
                    window.scrollTo({
                        top: targetPosition,
                        behavior: "smooth"
                    });
                }, 500); // Delay to match transition duration
            }
        });
    });
});

[Frencharme]

good idea @hosi ! thats cool thank you

[Frencharme]

Hello @hosi
Any idea how to make it work on infinite scroll query loop? After loading new items the unfold funktion is not working anymore
Best greetz
David

[hosi]

Hello David
If I can do it, I’ll send it here as well.
Kind Regards
Hossein