<p>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.</p>
<p>I would not use Javascript for this.
There are other ways to handle it:</p>
<ul>
<li>Shorten the text server side and show the complete text when the &quot;read more&quot; 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.</li>
<li>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.</li>
</ul>
<p>I think option 1 is the best choice here.</p>

CC BY-SA 4.0
2023-09-19T20:14:35.400Z
If I used an all Twig solution, like with slice (I'm not sure if the truncate filter works in Craft 2), how would I go about revealing all of the text on click?  I got this far in hiding part of the text, greater than 50 characters: {{ myText|length > 50 ? myText|slice(0, 51)|split(' ')|slice(0, -1)|join(' ') ~ '…' : myText }}
Or, assign 2 different variables and hide one/show the other on click?
buck1112
CC BY-SA 4.0
2023-09-19T20:31:35.147Z
Correct. In this specific case I would render the same text twice. Once for the trimmed version and once for the full version. Then just toggle the visibility of both. One can only be visible is the other one is hidden. If you want to prevent the full text from flashing when loading the page you can set display none on the element inline. I know it seems a bit crappy to do this inline but it's the only way to make sure it will get loaded at the same time as the template. Performance is key here.
Matthias
CC BY-SA 4.0
2023-09-19T08:20:19.627Z
2023-09-19T08:20:19.627Z
Matthias
<blockquote>
<p>I have a number of divs which are part of a Javascript &quot;read more&quot; script…</p>
</blockquote>
<p>For a readmore?? Why not just use the <a href="https://craftcms.com/docs/4.x/dev/filters.html#truncate" rel="nofollow noreferrer">truncate filter</a>?</p>
<pre><code>&lt;p&gt;{{ entry.intro|truncate(10, '…') }}&lt;/p&gt;

&lt;a href=&quot;{{ entry.url }}&quot;&gt;Read more…&lt;/a&gt;
</code></pre>

CC BY-SA 4.0
2023-09-19T13:49:24.927Z
2023-09-19T13:49:24.927Z
Seth Warburton
<p>I'm working on a template in Craft 2, and I have a number of divs which are part of a Javascript &quot;read more&quot; script, which automatically shortens the visible text at a set number of characters and then adds a &quot;read more&quot; link.  I have added the Javascript in the page template, but the entire text of the <code>div</code> 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 <code>display:none</code> style for <code>.post</code> .  With that style in place, the page does load correctly.
Is this a problem having to do with positioning within the template?</p>
<p>I've tried to position the Javascripts above and below <code>{% extends &quot;_layout&quot; %}</code> to no effect.</p>
<pre><code>{% set myJs4 %}
// Set the display property of the element to none using CSS
var divsToHide = document.getElementsByClassName(&quot;post&quot;);        
//divsToHide is an array
    for(var i = 0; i &lt; divsToHide.length; i++){
        divsToHide[i].style.display = &quot;none&quot;; 
    }

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

<templating><craft2><javascript>
Element In Template Not Hiding On Page Load
# Element In Template Not Hiding On Page Load

(Asked by: username_0 on 2023-09-18)

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,

**Tags:** templating, craft2, javascript


---

## 2 answers

### Answer by username_1 on 2023-09-19. Score: 2

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.

> **Comments:**
> **username_0**: If I used an all Twig solution, like with slice (I'm not sure if the truncate filter works in Craft 2), how would I go about revealing all of the text on click?  I got this far in hiding part of the text, greater than 50 characters: {{ myText|length > 50 ? myText|slice(0, 51)|split(' ')|slice(0, -1)|join(' ') ~ '…' : myText }} Or, assign 2 different variables and hide one/show the other on click?  
> **username_1**: Correct. In this specific case I would render the same text twice. Once for the trimmed version and once for the full version. Then just toggle the visibility of both. One can only be visible is the other one is hidden. If you want to prevent the full text from flashing when loading the page you can set display none on the element inline. I know it seems a bit crappy to do this inline but it's the only way to make sure it will get loaded at the same time as the template. Performance is key here.  

---

### Answer by username_2 on 2023-09-19. Score: 1

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?
{{ entry.intro|truncate(10, '…') }}

Read more…


---

