Read more tag in rich text element

I need a ‘read more’ collapse in a text element. I’m using the ‘rich text’ element and inserted the ‘read-more’ tag halfway the text. However, this doesn’t seem to work. Is this too easy thought?

Hi Paméla,

first things first: welcome to the forum!

Sorry, but can you tell me a little more about what exactly you’re up to?
Normally, the read more tag is used to truncate posts at a certain point, to not display the entire post e.g. on the home page or in archives, but only an excerpt.

Best regards,
timmse

Hi timmse, thanks for your reply. What I’m up to is actualy what you describe. However, it is not a post in this case, but a text element on a page (https://pearl.pambiusdemo.nl/discover-iceland/). The text near the pictures is much too long and I would want it to be ‘read more’ after a certain point. In the rich text element (the wyswyg) there is the ‘read more’ option available, but when inserted it doesn’t do anything.

Aaah ok, i guessed that already, but was not quite sure :smiley:
That won’t work with the read more tag, but actually you can truncate the text and insert a link to the entire post or page wherever you like. Please see this video.

Since you already have the Read more buttons anyway, you can of course just shorten or summarize the text so that you have a sort of introduction and all the detailed information on the linked subpage. That would be the simplest solution, right?

Yes, that is a simple solution, but not what I (or more specific the client) wants. On the services page I am making it like that. But thanks. I’ll consider this.

Well, the problem is that the text in the rich text element is static. How should the element know where you want to link to?

For posts that are dynamically queried, that’s a different story. There the read more tag works wonderfully, because the link to the post is already fixed.

However, the bottom line is that the read more tag is nothing more than a simple link :smiley:

Hey @pzeylstra

Welcome to the forum :slight_smile:

Do you mean something similar to what I have done on one of my pages here? (about 3rd of the way down.) The #1 Ecommerce Website Design Company - Web Design Saigon

Yes, that reveal option is what I mean

For that, you will need a code block.

Unfortunately, I do not know how to add the code here without it executing it? @timmse how do you add HTML code here but display the actual code, not the output?

<h1>Just use the </> Preformatted Text Option</h1> @Michael

Hello Michael, would be great if you are willing to share the code :smile:

Hmmn i did try that but it seemed to not work in the previewer. Lets check:

@pzeylstra

So the steps i took to achieve it was to:

  1. Have a normal text block and add the amount of text to where you would like to have the ‘read more’
  2. Add a code block underneath the text element
  3. Add the code below you can change the ‘read more’ to anything you like. Also you might need to add some <br>s to help with spacing. - Do not forget to execute the code too :slight_smile:

<details><summary>read more</summary><p>add your remaining text</p></details>

Hope that helps :slight_smile:

1 Like

Very happy with that! It works fine. Thank you very much :ok_hand: :clap:

2 Likes

That’s awesome! Glad you got it sorted :slight_smile: