Client wants some of the pages to have the read more functionality where only a portion of the paragraph is initially revealed.
I've implemented readmore.js which seems to be working really well. Opening and closing smooth speed is editable. After closing, the page smooth scrolls back to the beginning of the block.
Only one tiny thing. Depending on the number of lines of text, there are situations where the last line displaying within the closed container is sliced in half, or you can see the top edges of letters.
Height is controllable. readmore.js used pixels. I use ems. Additionally, the site is responsive, so number of lines of text is fluid.
<article>
<h1>Headline Goes Here</h1>
<p>Et, conse nobit, odit, alias alibus sum si occus, voluptaquo et experessinum sectem fuga. Itae. Cus eatum eumquaes simporerro conectatio. Occusamusam sequi int derio. Itatius quis dollest labores numquia de odis maio tem. Ga. Iquidebitis mo volorum volorest, volecab orepro te dolorerspit aut ut et eosantis re si dolupta aliquodita qui a dolo omniaep restrum sequis eos eos ped quunt. Et, conse nobit, odit, alias alibus sum si occus, voluptaquo et experessinum sectem fuga. Itae. Cus eatum eumquaes simporerro conectatio. Occusamusam sequi int derio. Itatius quis dollest labores numquia de odis maio tem. Ga. Iquidebitis mo volorum volorest, volecab orepro te dolorerspit aut ut et eosantis re si dolupta aliquodita qui a dolo omniaep restrum sequis eos eos ped quunt.</p>
<p>Experessinum sectem fuga. Itae. Cus eatum eumquaes simporerro conectatio. Occusamusam sequi int derio. Itatius quis dollest labores numquia de odis maio tem. Ga. Iquidebitis mo volorum volorest, volecab orepro te dolorerspit aut ut et eosantis re si dolupta aliquodita qui a dolo omniaep restrum sequis eos eos ped quunt.</p>
</article>
<script>
$('article').readmore({
moreLink: '<a href="#">Read more ></a>',
speed: 500,
maxHeight: 200,
afterToggle: function(trigger, element, expanded) {
if(! expanded) { // The "Close" link was clicked
$('html, body').animate( { scrollTop: element.offset().top }, {duration: 1000 } );
}
}
});
</script>
I added a padding top in the css below because the Read More link was awkwardly close to the bottom of the text when the container was close. When the container is open, I believe the bottom margin of the paragraph pushes the Read More link farther away.
.readmore-js-toggle, .readmore-js-section {
display: block;
padding-bottom: 1.5em;
padding-top: 1em;
width: 100%;
}
.readmore-js-section {
overflow: hidden;
}
Just wondering if anyone else has worked with readmore.js and might be willing to pass along some tips.
Or, maybe recommend other widgets or add-ons that do the same.
Any and all feedback appreciated.
