Tell us what you are trying to do?
I need an excerpt, so have a few lines, then have a read more button that shows the rest of the text (dynamic body).
Is there any documentation that you are following?
No
Is there a similar example that we can see? hidden link
Hello. Thank you for contacting the Toolset support.
To achive that we need to add custom JS/jQuery code.
Can you please send me admin access details and let me try to check what is the possible solution/workaround.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I have set the next reply to private which means only you and I have access to it.
Hello Minesh,
Before we do this, I think I can achieve what I am trying to do with the more block, hidden link
I am using a single field to load the body. However, on display on the front-end, it removes the more functionality.
As you shared the link - if you check the link, the more block will have effect on archive pages not on single post pages.
For single post pages, you will have to use the custom javascript/jQuery workaround. If you can share admin access details I will check to see what would bhe the possible workaround in your case.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I have set the next reply to private which means only you and I have access to it.
I've added the CSS class "right-column-page-content" to your single field block that displays the post body content and added the following code to "Custom Javascript" section of the content template:
- hidden link
jQuery(document).ready(function($) {
var contentEl = $('.right-column-page-content');
var fullHTML = contentEl.html().trim();
var charLimit = 250;
// Create a temporary container to parse the HTML while preserving structure
var tempEl = $('<div>').html(fullHTML);
var visibleHTML = '';
var totalChars = 0;
// Walk through the nodes and preserve HTML until limit is reached
tempEl.contents().each(function() {
if (totalChars >= charLimit) return;
var clone = $(this).clone();
var text = clone.text();
if ((totalChars + text.length) <= charLimit) {
visibleHTML += $('<div>').append(clone).html();
totalChars += text.length;
} else {
var partialText = text.substring(0, charLimit - totalChars);
clone.text(partialText + '...');
visibleHTML += $('<div>').append(clone).html();
totalChars = charLimit;
}
});
if (totalChars < fullHTML.length) {
var toggleHTML = `
<div class="short-text">${visibleHTML}</div>
<div class="full-text" style="display:none;">${fullHTML}</div>
<a href="#" class="read-more-toggle">Read More</a>
`;
contentEl.html(toggleHTML);
contentEl.on('click', '.read-more-toggle', function(e) {
e.preventDefault();
var $this = $(this);
contentEl.find('.short-text, .full-text').toggle();
$this.text($this.text() === 'Read More' ? 'Read Less' : 'Read More');
});
}
});
