Read more text

Hi,

We have created a page where we want to display only 2 lines on every section on the page and add a read more button below. If the user clicks on that read more button it should expand like accordions.

I tried doing it exactly like the instructions in the documentation (link below).
https://xtemos.com/docs-topic/read-more-button-for-text-or-section-row/

It’s working but I’m facing a few problems.

1. The Read More button is too close to the text. (please check the screenshot below)
2. Can we add a bit of animation when the user clicks on the read more button and the text expands with 0.5s animation?

Screenshot for 1st problem: https://ibb.co/0BPy2v2

Thank you.
Regards,

Hi shweta,

Thanks for reaching to us.

1. By default, for the Collapse content, it needs Fade out color to hide few content https://prnt.sc/y73f_zuFw9ik or Read More button will override content. In additional to, in case the height of collapse content is small (in this case, you set 50px), add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS to decrease height of fade out color

.wpb_column.wd-collapsible-content:not(.wd-opened) > .vc_column-inner > .wpb_wrapper:after {
    height: 20px;
}

2. There is no such an option by default, unfortunately.

Regards,

Hi,

We don’t want to add any colors as we use an image in the background. I removed the color from there as it was white by default.

The code didn’t work. It’s just fading the color from the text. I want to add margin or padding above the read more button to separate it from the text around 20px. Please check the screenshot before and after adding the code alongside the code.

Before: https://ibb.co/7gDhF2F
After: https://ibb.co/8c0n2Vc

Thank you.
Regards,

Hi shweta,

Because of height of collapse content too small. Please increase the height and check again.

Regards,

Hi,

There won’t be a lot of content but 3-4 lines in every section. The requirement is that they want a read more button after 2 lines and if clicked on read more then the remaining text will open.

Any solution?

Regards,

Hi shweta,

By default, column is set to hidden attribute by default, so if you want to place Read more button below content, it will be hidden as well. https://prnt.sc/HKYgyaJxKQ3a

1. Please set opacity of background color to 1 https://prnt.sc/EbZFljC4wAK_

2. Please remove previous Custom CSS code and use below one.

.wpb_column.wd-collapsible-content:not(.wd-opened) > .vc_column-inner > .wpb_wrapper:after {
    height: 50px;
}

3. Change button color to make it readable https://prnt.sc/qgYm5lKOzWhC

Regards,

Hi,

I’m sorry for the late response. I was busy with another project.
I tried just now what you suggested but it didn’t work. Check the screenshot below.

Screenshot: https://ibb.co/zx5XjMT

Thank you.
Regards,

Hi shweta,

I made it looks better. Please check your site again.

Regards,

[Author]

Posts