Hi Support
I am trying to implement the solution for introducing "Read more ..." functionality for a WYSIWYG field proposed here:
https://toolset.com/forums/topic/implement-read-more-in-wysiwyg-fields-on-front-end-template/
So far I have added the code to Toolset > Settings > Custom Code (add-shortcode-wysiwyg-field-read-more), registered the shortcode unter Toolset > Settings > Front-end Content (perhaps that ticket could be updated to mention this step, if it is indeed necessary?).
I then added the field I want to have the Read More functionality on
[WYSIWYG_field field="nanny-what-i-can-offer" chars="150" ellipsestext=" ..." moretext="more" lesstext="less"]
to the View "Find a Native Nanny Search and Results View".
The field is being displayed (last field in each of the little "cards") hidden link but the toggling of the field is not working. (Showing one example in the screenshot)
Have I missed a step somewhere?
Thanks and kind regards
Simon
Hello,
I assume we are talking about the post view "Find a Native Nanny Search and Results View":
hidden link
Where do you put the custom shortcode [WYSIWYG_field]?
I have searched it in above post view, but can not find it.
Hi Luo
It's on line 52 of the Content Template section "Loop item in Find a Native Nanny Search and Results View".
Line 51 is the original field.
Kind regards
Simon
Thanks for the details, since your website is using Bootstrap, so you don't need that custom shortcode, and switch to Bootstrap collapse, I have setup a demo in your website:
1) Edit the post view:
hidden link
In section "Loop item in Find a Native Nanny Search and Results View", add line 57~60:
<p class="collapse" id="collapseExample-[wpv-post-id]" aria-expanded="false">
[types field='nanny-what-i-can-offer' output="raw"][/types]
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample-[wpv-post-id]" aria-expanded="false" aria-controls="collapseExample-[wpv-post-id]"></a>
2) in section "Loop Editor"-> "CSS Editor", line 24~40, add below codes:
.collapse:not(.show) {
display: block;
height: 3rem;
overflow: hidden;
}
.collapsing {
height: 3rem;
}
a.collapsed::after {
content: '+ Show More';
}
a:not(.collapsed)::after {
content: '- Show Less';
}
Test it in frontend:
click link "Show more", it works fine.
Above example can display two paragraphs by default, click the link "Show more", it will display all contents,
More help:
hidden link
Hi Luo
I tried this at the beginning of the week and had a few issues, need a bit more time to work on it. Please don't let it close yet.
Thanks and regards
Simon
I have marked this ticket as "Waiting for feedback" status, please update here if still need assistance.
Hi Luo
Unfortunately as far as I can see, the proposed solution is not working correctly. It is making all links in the Results section of the View have the Show More/Show Less appended on to it. Is there any way to change it, so that just the Show More/Less acts as a link and the other buttons/links in the results section work as they did before?
Thanks and kind regards
Simon
No, there isn't such kind of built-in feature within Toolset plugins, the custom codes in the thread you mentioned above works for only single post, it won't work in the post view. According to our support policy, we don't provide custom codes support.
And the workaround I provided above is only a demo for your reference, you can also check it with our Toolset Contractors:
https://toolset.com/contractors/
Hi Luo
I'm a bit confused. First you propose a solution, implement it on our site, then you say "it's working", and when I then show you it's not working, you just say it's not possible.
I think the issue is in the CSS with the
. Because the role is "button" it is changing all links to buttons. Is it possible to change the role to a different name, or reference it differently, so that only this one "button" gets used for the Show More link without affecting all other "buttons" in the Results section?
Kind regards
Simon
Hi Simon,
Luo is on vacation so I'll be following up on this ticket.
I'm going to review this discussion, perform some tests on my website and will share the findings, shortly.
Thank you for your patience.
regards,
Waqar
Thank you for waiting.
I've made small changes to the CSS code that Luo added, to make it more precise and target only the read more links.
Can you please check the page now?
.collapse[role="readmore"]:not(.show) {
display: block;
height: 3rem;
overflow: hidden;
}
.collapsing[role="readmore"] {
height: 3rem;
}
a[role="readmore"].collapsed::after {
content: '+ Show More';
}
a[role="readmore"]:not(.collapsed)::after {
content: '- Show Less';
}
Hi Waqar
Thanks for your update. It looks like your changes work however they show either the entire field contents or none of the field contents. Our aim was to provide a "teaser", say the first 100 characters of the first line or two of the field contents and then to provide the toggle mechanism to show the rest of the field.
Is something like that possible?
Kind regards
Simon
Thanks for writing back.
The shortcode to show more/less content from the field, that you referenced from my other ticket (ref: https://toolset.com/forums/topic/implement-read-more-in-wysiwyg-fields-on-front-end-template/ ), wasn't working, because, it was designed for only one instance on the page.
In your case, because it was placed in the view's loop, so it needed to work, in multiple instances. I've updated the code snippet for it slightly and it seems to be working now:
add_shortcode('WYSIWYG_field', 'WYSIWYG_field_func');
function WYSIWYG_field_func($atts) {
$field = $atts['field'];
$chars = $atts['chars'];
$ellipsestext = $atts['ellipsestext'];
$moretext = $atts['moretext'];
$lesstext = $atts['lesstext'];
$field_content = strip_tags( types_render_field($field, array('output' => 'raw')) );
$current_post = do_shortcode('[wpv-post-id]');
if(!empty($field_content)) {
$field = str_replace('-', '', $field);
ob_start();
echo '<div class="more'.$field.$current_post.'">';
echo $field_content;
echo '</div>';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var showChar<?php echo $field.$current_post; ?> = <?php echo $chars; ?>;
var ellipsestext<?php echo $field.$current_post; ?> = '<?php echo $ellipsestext; ?>';
var moretext<?php echo $field.$current_post; ?> = '<?php echo $moretext; ?>';
var lesstext<?php echo $field.$current_post; ?> = '<?php echo $lesstext; ?>';
$('.more<?php echo $field.$current_post; ?>').each(function() {
var content<?php echo $field.$current_post; ?> = $(this).html();
if(content<?php echo $field.$current_post; ?>.length > showChar<?php echo $field.$current_post; ?>) {
var c<?php echo $field.$current_post; ?> = content<?php echo $field.$current_post; ?>.substr(0, showChar<?php echo $field.$current_post; ?>);
var h<?php echo $field.$current_post; ?> = content<?php echo $field.$current_post; ?>.substr(showChar<?php echo $field.$current_post; ?>-1, content<?php echo $field.$current_post; ?>.length - showChar<?php echo $field.$current_post; ?>);
var html<?php echo $field.$current_post; ?> = c<?php echo $field.$current_post; ?> + '<span class="moreellipses<?php echo $field.$current_post; ?>">' + ellipsestext<?php echo $field.$current_post; ?>+ ' </span><span class="morecontent<?php echo $field.$current_post; ?>"><span style="display: none;">' + h<?php echo $field.$current_post; ?> + '</span> <a href="" class="morelink<?php echo $field.$current_post; ?>">' + moretext<?php echo $field.$current_post; ?> + '</a></span>';
$(this).html(html<?php echo $field.$current_post; ?>);
}
});
$(".morelink<?php echo $field.$current_post; ?>").click(function(){
if($(this).hasClass("<?php echo $lesstext.$current_post; ?>")) {
$(this).removeClass("<?php echo $lesstext.$current_post; ?>");
$(this).html(moretext<?php echo $field.$current_post; ?>);
} else {
$(this).addClass("<?php echo $lesstext.$current_post; ?>");
$(this).html(lesstext<?php echo $field.$current_post; ?>);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<?php
return ob_get_clean();
}
}
You can see it in action on the 'find a nanny' page and I've removed the extra code from the view, that is no longer needed.
HI Waqar
Thanks so much for this. It looks like it's working as we want it to on Find a Native Nanny page. I will try to replicate it now for the Find a Job view, to see if I can get it working there and that I'm doing everything right, as I'll have to repeat the steps and the code on our production site. But this is looking great so far! 😎 Once again, you've been a great help, Waqar!
Kind regards
Simon
Hi Simon,
Thanks for the update and glad I could help.
You're welcome to test this on other pages too and let me know if you have any follow-up questions.
For a new question or concern, please start a new ticket - we're here to help.
regards,
Waqar
