[Resolved] Implement a read more link/button with post excerpts or post content fields

[Author]

Posts

[Nicholas]

Hello I'd like to implement a read more link/button with post excerpts or post content fields. (see image)
When I click on it the text should expand immediately.
For example limit the post excerpt to 50 characters and then when I click the button the entire excerpt should display.
How's this possible?

Regards,
Nicolas

[Noman]

Hi Nicholas,

Thank you for contacting Toolset support. we have another client who had the similar issue and luckily was also able to solve it, this may help in your case:
https://toolset.com/forums/topic/wpv-post-excerpt-read-more-link/#post-217884

Thank you

[Nicholas]

Hello not quite what I wanted, as I would like to implement this on the post itself.
When I click on the read more button the text should expand immediately.
For example limit the post excerpt to 50 characters and then when I click the button the entire excerpt should display.

How is this possible?

Regards,
Nicholas

[Noman]

We can do that with JS code as Toolset does not have anything like this. I am trying few things at my end and will let you know my findings soon.

Thanks

[Nicholas]

Thank you.

[Noman]

Hello,

Can you please confirm that you want to have something like on this site -- click on ...Lees Meer (read more): hidden link

If yes, you can achieve this using following HTML, CSS and JS:

HTML code:

<article class="news-post-section open">
  <div class="title-bar clearfix">
    <h2 class="post-title"><a href="#">Title</a></h2>
  </div>
  <div class="post-inner-content clearfix">
    <div class="post-excerpt">
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
    </div>
    <a href="#" class="btn-read-more">Toon Minder</a> 
   </div>
</article>

==> Please update the html code or shortcodes in the above example code with your own content and modify as needed.

CSS code:
You may need to change max-height: 145px to your required value.

.post-excerpt {
    line-height: 1.9;
    max-height: 145px;
    overflow: hidden;
    transition: max-height 0.15s ease-out 0s;
}

.news-post-section.open .post-excerpt {
    max-height: 1000px;
    overflow: visible;
    transition: max-height 0.25s ease-in 0s;
}

JS code:

jQuery(document).ready(function( $ ){


$('.news-post-section').each(function(index, element) {
		var cont_len = $(this).find('.post-excerpt').height();
		if( cont_len < 145 )
			$(this).find('.btn-read-more').hide('fast');
	});

$('.btn-read-more').on('click',function(e){
	if($(this).parents('.news-post-section').hasClass('open')){
		$(this).parents('.news-post-section').removeClass('open');
		$(this).text('...Lees Meer');
	}
	else{
		$(this).parents('.news-post-section').addClass('open');
		$(this).text('Toon Minder');
	}
	e.preventDefault();
});

});

==> Please update the JS code or text in the above example with your own and modify as needed.

Thanks

[Nicholas]

This is resolved.