Hi all,
I would like to add a custom function “read more” on my Squarespace site in a block of text.
So that all the text of a paragraph is not fully display on a page, but only a part of it.
The user has the possibility to click on “read more” to display fully the text he wants to read.
For example – like on this websites:
https://ninjatune.net/release/the-cinematic-orchestra/to-believe-2
Screenshot:
https://ibb.co/R7W8mtF
Could you please help me?
Many thanks
Hi office127, welcome to the forums!
The site you linked to uses Javascript to show more text, but this can also be done with pure CSS if you like.
Please check if Squarespace already offer this feature in some way to make sure it is not lost with an eventual template update.
If you prefer to code it yourself, make sure that you have a subscription that allows changing the HTML as well as add CSS for these changes.
To achieve the “read more” function the page’s html code needs to be modified and some css added to show/hide the modified parts.
If you prefer a Javascript solution you would still need access to the page’s html to add some hooks. In that case I suggest moving this thread to the Javascript forum.
Hi there office127,
here is one way of doing it…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#container {
max-width: 62.5em;
padding: 0.5em 1em;
margin: auto;
border: 1px solid #999;
background-color: #fff;
}
.information {
padding: 1em;
margin: 0.5em 0;
border: 1px solid #999;
background-color: #fcfcfc;
}
.information div {
display: none;
}
#r0:target,
#r1:target,
#r2:target,
#r3:target{
display: block;
}
.information a {
font-weight: bold;
color: #000;
text-decoration: none;
}
.information a:hover,
.information a:active {
color: #900;
}
</style>
</head>
<body>
<div id="container">
<div id="p0" class="information">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
</p>
<a href="#r0">Read more...</a>
<div id="r0">
<p>
Phasellus rutrum lacus at dolor placerat suscipit rhoncus
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<a href="#p0">Read less</a>
</div>
<!-- .information --></div>
<div id="p1" class="information">
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
</p>
<a href="#r1">Read more...</a>
<div id="r1">
<p>
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
<a href="#p1">Read less</a>
</div>
<!-- .information --></div>
<div id="p2" class="information">
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit. Pellentesque non lectus
odio. Curabitur pulvinar orci vitae lorem bibendum volutpat.
</p>
<a href="#r2">Read more...</a>
<div id="r2">
<p>
Cras euismod euismod nibh, nec hendrerit ante efficitur id.
Donec sit amet interdum mauris. Maecenas pellentesque, sem a
commodo tincidunt, quam ex viverra nibh, non consectetur odio
quam et velit. Nulla eu risus quis magna suscipit malesuada
vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id
</p>
<a href="#p2">Read less</a>
</div>
<!-- .information --></div>
<div id="p3" class="information">
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
</p>
<a href="#r3">Read more...</a>
<div id="r3">
<p>
Elementum nisi interdum. Integer sem quam, tincidunt nec quam
ac, lobortis volutpat ipsum. Curabitur nec turpis viverra,
eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam
nec ullamcorper enim. Donec sit amet commodo ante, vitae
consectetur sem. Proin ut luctus dolor. Integer lectus massa,
maximus nec urna non, ullamcorper hendrerit mi.
</p>
<a href="#p3">Read less</a>
</div>
<!-- .information --></div>
<!-- #container --></div>
</body>
</html>
…and I will show you another. 
coothead
Thank you both of you for your answer, very useful 
Actually, Squarespace doesn’t not offer this feature. I contacted the customer support:
they suggested to do some custom for that.
With Squarespace we have possibility of adding some blocks of code and choosing for example: HTML, CSS, Javascript etc.
The idea is that I would like to add this block of code for the “read more” feature and insert the text paragraph text of my choice, choose at what line of the paragraph I would like the mention “read more” to appear. So I can reduce long text on my site, the user will be free to read more if he wants to.
Hi there office127,
here is the alternative example that I promised…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#container {
max-width: 62.5em;
padding: 0.5em 1em;
margin: auto;
border: 1px solid #999;
border-radius: 0.75em;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
#container input {
position: absolute;
left: -999em;
}
.information {
padding: 1em;
margin: 0.5em 0;
border: 1px solid #999;
border-radius: 0.75em;
background-color: #fcfcfc;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 );
}
.information div {
display: none;
}
#r0:checked ~ .information #rm0,
#r1:checked ~ .information #rm1,
#r2:checked ~ .information #rm2,
#r3:checked ~ .information #rm3 {
display: block;
}
.information label{
font-weight: bold;
color: #000;
cursor: pointer;
}
.information label:hover,
.information label:active {
color: #900;
}
</style>
</head>
<body>
<div id="container">
<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">
<input id="r2" name="r" type="radio">
<input id="r3" name="r" type="radio">
<input id="p0" name="r" type="radio">
<div class="information">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
</p>
<label for="r0">Read more...</label>
<div id="rm0">
<p>
Phasellus rutrum lacus at dolor placerat suscipit rhoncus
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<label for="p0">Read less</label>
</div>
<!-- .information --></div>
<div class="information">
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
</p>
<label for="r1">Read more...</label>
<div id="rm1">
<p>
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
<label for="p0">Read less</label>
</div>
<!-- .information --></div>
<div class="information">
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit. Pellentesque non lectus
odio. Curabitur pulvinar orci vitae lorem bibendum volutpat.
</p>
<label for="r2">Read more...</label>
<div id="rm2">
<p>
Cras euismod euismod nibh, nec hendrerit ante efficitur id.
Donec sit amet interdum mauris. Maecenas pellentesque, sem a
commodo tincidunt, quam ex viverra nibh, non consectetur odio
quam et velit. Nulla eu risus quis magna suscipit malesuada
vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id
</p>
<label for="p0">Read less</label>
</div>
<!-- .information --></div>
<div class="information">
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
</p>
<label for="r3">Read more...</label>
<div id="rm3">
<p>
Elementum nisi interdum. Integer sem quam, tincidunt nec quam
ac, lobortis volutpat ipsum. Curabitur nec turpis viverra,
eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam
nec ullamcorper enim. Donec sit amet commodo ante, vitae
consectetur sem. Proin ut luctus dolor. Integer lectus massa,
maximus nec urna non, ullamcorper hendrerit mi.
</p>
<label for="p0">Read less</label>
</div>
<!-- .information --></div>
<!-- #container --></div>
</body>
</html>
coothead
If you can’t make the examples @coothead already posted to work you are welcome to post relevant code changes you made here to get further help.
I noticed that you have already posted a link to your page in another topic: Custom Newsletter in footer + reduce size .
If you are allowed to use jQuery I have an old version here that might be of some use.
I tried the first option of Coothead and here is the result:
When i click on: “read more” no text is collapsing or displaying.
The font is not the one from the actual site, and it has a background.
I tried the second option of Coothead and here is the result:
It’s working better, “read more” and “read less” are working. But still, the “read more” still remain on screen when clicked on “read less”.
How I could solve that, still have the font of my site, without background? It also modify the all font of my site…
Thank you for your kind help!
Hi there office127,
to remove the “Read more” in the second option,
add this CSS…
#r0:checked ~ .information label[for=r0],
#r1:checked ~ .information label[for=r1],
#r2:checked ~ .information label[for=r2],
#r3:checked ~ .information label[for=r3] {
display: none;
}
coothead
Coothead, super thank you very much
to remove the background and keep the same font with my site, how could i do that?
I would also like to insert this symbol:
→ before the mention read more
the code i use for that on my site: <span style="color: #000000;"> <font size="4"><strong> → Other platforms</strong></span>
Hi there office127,
what is the font in question?
coothead
The <font> element is obsolete and should not be used.
Use CSS to set fonts and other presentational information.
Works perfectly.
And to make the “Read more” dissapear in your first option,
add this 5 commented lines of CSS…
.information div {
display: none;
position: relative; /* to raise its bottom level above the link */
background-color: inherit; /* to cover the link */
}
#r0:target,
#r1:target,
#r2:target,
#r3:target {
display: block;
margin-top: -2.62em; /* neg value = p margin + a line-height */
}
.information p {
margin: 1em 0; /* to make it a known value */
}
.information a {
color: #000;
line-height: 1.62em; /* to make it a known value */
font-weight: bold;
text-decoration: none;
}
The “Read more” link becomes hidden under the paragraph that inherits current background-color and moves up by the sum of its margin and the height of the link.
I would regard the negative margin to be a “magical number” as it depends on the environment, but I also regard it to be a reliable sum of two known values.
Hi there office127,
I did not supply a remove the “Read more” for the first option,
as you did not appear to like it. 
But just in case you change your mind, I would have done it
like this…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#container {
max-width: 62.5em;
padding: 0.5em 1em;
margin: auto;
border: 1px solid #999;
background-color: #fff;
}
.information {
padding: 1em;
margin: 0.5em 0;
border: 1px solid #999;
background-color: #fcfcfc;
}
.information div,
.information a:nth-of-type(2){
display: none;
}
#r0:target,
#r1:target,
#r2:target,
#r3:target,
#r0:target ~ a:nth-of-type(2),
#r1:target ~ a:nth-of-type(2),
#r2:target ~ a:nth-of-type(2),
#r3:target ~ a:nth-of-type(2){
display: block;
}
#r0:target ~ a:nth-of-type(1),
#r1:target ~ a:nth-of-type(1),
#r2:target ~ a:nth-of-type(1),
#r3:target ~ a:nth-of-type(1) {
display: none;
}
.information a {
font-weight: bold;
color: #000;
text-decoration: none;
}
.information a:hover,
.information a:active {
color: #900;
}
</style>
</head>
<body>
<div id="container">
<div id="p0" class="information">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
</p>
<div id="r0">
<p>
Phasellus rutrum lacus at dolor placerat suscipit rhoncus
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
<a href="#r0">Read more...</a>
<a href="#p0">Read less</a>
<!-- .information --></div>
<div id="p1" class="information">
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
</p>
<div id="r1">
<p>
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
<a href="#r1">Read more...</a>
<a href="#p1">Read less</a>
<!-- .information --></div>
<div id="p2" class="information">
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit. Pellentesque non lectus
odio. Curabitur pulvinar orci vitae lorem bibendum volutpat.
</p>
<div id="r2">
<p>
Cras euismod euismod nibh, nec hendrerit ante efficitur id.
Donec sit amet interdum mauris. Maecenas pellentesque, sem a
commodo tincidunt, quam ex viverra nibh, non consectetur odio
quam et velit. Nulla eu risus quis magna suscipit malesuada
vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id
</p>
</div>
<a href="#r2">Read more...</a>
<a href="#p2">Read less</a>
<!-- .information --></div>
<div id="p3" class="information">
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
</p>
<div id="r3">
<p>
Elementum nisi interdum. Integer sem quam, tincidunt nec quam
ac, lobortis volutpat ipsum. Curabitur nec turpis viverra,
eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam
nec ullamcorper enim. Donec sit amet commodo ante, vitae
consectetur sem. Proin ut luctus dolor. Integer lectus massa,
maximus nec urna non, ullamcorper hendrerit mi.
</p>
</div>
<a href="#r3">Read more...</a>
<a href="#p3">Read less</a>
<!-- .information --></div>
<!-- #container --></div>
</body>
</html>
coothead
Clever, this works perfectly too. 
I thought the quiz didn’t allowed touching the html. 
I cheat. 
coothead
I am not sure I well understand how to place the new lines of codes you provided afterwords
I am very beginner with coding
Would you be nice to provide the full code with:
-no background
-full text that display/collapse whenever the user click on “read more” / we don’t see the read more in the second option, the user can see “read less” or “close”
-with the font and size of my current site:
https://kazoo-bulldog-snp5.squarespace.com/
password to access is : “1234”
I am looking for reproducing exactly like that (you can see on the first text paragraph of this page):
http://www.oxmose.com/catalogue?ref=landing
Many thanks for your kind help
Hi there office127,
I have refined my second example, somewhat,
to match your example.
Check out the attachment to see the result…
office127.zip (3.1 KB)
With regards to the font that you wish to use,
just specify it here in the stylesheet…
.information {
padding: 1em;
margin: 0.5em 0;
line-height: 1.1em;
}
…by adding this line…
font-family: 'your font choice here';
coothead
Coothead, thank you very much
As I am on Squarespace, apparently i only add the possibility of adding block with some different languages:
As you can see on this screenshot. What code should i copy/paste from the archive you’ve sent me?
Apparently I need to copy some CSS + HTML, but it seem that to work on Squarespace, it’s either one, either the other but I cannot both
Hi there office127,
I would humbly suggest that you contact “Squarespace”
and ask them how to install a CSS file and and insert an
HTML code snippet into one of their pages.
https://answers.squarespace.com/index.html
coothead