Home » Jquery » javascript – jQuery – Insert btn and then truncate-Exceptionshub

javascript – jQuery – Insert btn and then truncate-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have seen other posts like jQuery Truncate text and insert about this. However, they don’t seem to have an answer and they seem to be targeting html classes which is not what I require.

Note: The content output is via the wordpress default ‘the_content()’ function.

Because I do not fancy going through 400+ pages individually editing the page to start adding classes to the page for this to work, I have taken the approach of searching for

tag containing and “How it works” as my anchor. From here, I would like to have 10 words and then a button saying “readmore”. I realise there is a read-more button on the wordpress default wysiwyg but that would involve editing the 400+ pages which as mentioned before, I want to steer clear of.

The code I have, is almost there. But I believe it assumes the button exists in the page already which it doesn’t. My colleague helped with this code but he is unavailable for several days.

Note: This will eventually only work on a mobile device < 992 but as you can see, I have commented out this while I try getting it working. At present, this code doesn’t return errors that I can see but it also doesn’t execute either.

WordPress seemingly being annoying seems to be setting our jQuery v1.12. I have a migration plugin but that is inactive at present due to the impact turning it on has on other parts of the website.

Any help would be much appreciated.

jQuery(function () {

    //if (jQuery(window).width() >= 992) return;

​   var $content = jQuery('.key-content > article');
    var $howItWorksHeading = $content.find('strong:contains("How it works")').parent();
    var $howItWorksText = $howItWorksHeading.next();
    var $rest = $howItWorksText.nextAll(':not(.features-block)');
    $rest.hide();
    var originalText = $howItWorksText.text();
    var truncated = originalText.trim().split(' ').slice(0, 10).join(' ') + '…';

    $howItWorksText.text(truncated);
    var $readMoreButton = jQuery('<button class="btn btn-primary read-more">Read more</button>');

    $howItWorksText.after($readMoreButton);
        $readMoreButton.on('click', function () {
            $readMoreButton.remove();
            $howItWorksText.text(originalText);
            $rest.show();
        });
});
<div class="key-content">

	<article>

	<p><strong>points</strong></p>
	<ul>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	</ul>

	<p><strong>How it works</strong></p>
	<!-- dynamically add button after 10 characters of the first paragraph -->
	<!-- <button class="btn btn-primary read-more">Read more</button> -->
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
							   

	<p><strong>points of interest</strong></p>
	<ul>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	</ul>
			 
	<div class="features-block">
		<!-- contains icons -->
	</div>
	</article>
</div>
How to&Answer: