Element In Template Not Hiding On Page Load

Question

I'm working on a template in Craft 2, and I have a number of divs which are part of a Javascript "read more" script, which automatically shortens the visible text at a set number of characters and then adds a "read more" link. I have added the Javascript in the page template, but the entire text of the div displays briefly before the page loads completely. I have a Javascript to hide the text until page load (below), but the text is still briefly visible. It was successful in my non-Craft test, however, with the text never visible on page load. In the meantime, I've had to resort to a seemingly redundant default style of display:none style for .post . With that style in place, the page does load correctly. Is this a problem having to do with positioning within the template?

I've tried to position the Javascripts above and below {% extends "_layout" %} to no effect.

{% set myJs4 %}
// Set the display property of the element to none using CSS
var divsToHide = document.getElementsByClassName("post");        
//divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none"; 
    }

// Remove the display property after the page loads using the DOMContentLoaded event
document.addEventListener("DOMContentLoaded", function() {
var divsToShow = document.getElementsByClassName("post"); 
//divsToShow is an array
    for(var i = 0; i < divsToShow.length; i++){
        divsToShow[i].style.display = "block"; 
    }
});
{%endset%}
{% includeJs myJs4 %}

And then,

Answer 1

What you are seeing is the page being rendered with HTML and CSS first. This is the part where the text is completely visible. After a second the Javascript is executed which shortens the texts.

I would not use Javascript for this. There are other ways to handle it:

• Shorten the text server side and show the complete text when the "read more" button is clicked. You can either render the complete text server side along with the shorter text but put a display none property on it inline. On click you can remove the display property. Or fetch the content with Javascript on click from the server.
• Use CSS to put a max-height property on the text container along with overflow hidden. Note that this still won't completely fix your issue because CSS is loaded after HTML so there will still be layout shift but much less noticable. I'm also guessing this is not the design you want to achieve.

I think option 1 is the best choice here.

Answer 2

I have a number of divs which are part of a Javascript "read more" script…

For a readmore?? Why not just use the truncate filter?

<p>{{ entry.intro|truncate(10, '…') }}</p>

<a href="{{ entry.url }}">Read more…</a>