Jump to content

How do I provide the ability for a viewer to "Read More" without going to a new page?

Recommended Posts

When I put a text or paragraph in my website (Not a Blog) I want visitors to have a read more option so when they click they are redirected to the paragraph which contains the whole information (not a new page - just want to expand the existing reading section).

Thank you

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply

There are a lot of pure CSS solutions if that's what you want. Try googling:

read more pure CSS

I prefer CSS plus Javascript, because usually there is less markup, and CSS solutions don't work easily with multiple articles on one page. Either way, you will have to do some markup.

Here's a CSS/JS way:

(If you google, there are many, many other ways out there, probably some better and simpler. I can imagine, for example, that with a more complicated javascript, you could reduce the markup to almost none.):



Password: showmestuff


Use a markdown or code block. You can add as many posts as you want. This example has just one:

<div class="my-container">

   <div class="my-post">

      <div class="my-excerpt">
          <p>Alii pertinacia quo at. Bonorum oporteat concludaturque ne sed, te quod nullam eos. Ei qui decore oporteat. At noster principes duo, brute labores mei id. Est cu minimum legendos, qui ex minim docendi suscipit. Vim no eius epicurei oportere.</p>

       <div class="my-therest">
             <p>Eos ad reque putant vivendo. Vel primis volumus accusata an, at pro vide utamur. Usu modus suscipit euripidis ex, aeque saperet nusquam ut eos. Cum cu cibo dicat dolorem. Quo veri nobis id. Cum at inermis omittantur. Pertinax cotidieque deterruisset at usu. Nam facer petentium definitiones ei, ad probo omittantur eam, nec iisque saperet adversarium ea. Mei ex probatus appellantur philosophia, ea suas postea quo, eu rebum dolores qui. At zril pericula reprimique duo, qui eu maiestatis argumentum cotidieque.</p>

      <div class="my-button">
        <a class="my-link" onclick="reveal(this);">READ MORE</a>




Add this to Design > Custom CSS (do this only once)

   .my-container {
   div.my-post {
   vertical-align: top;
   background-color: #EEE;
   div.my-excerpt, div.my-therest {
   font-size: 1em;
   line-height: 1.35em
   div.my-excerpt > p {
   div.my-therest {
   .my-button {
   margin-top: .5em;
   font-size: .75em;
   text-decoration: underline;
   .my-link {


Add this to Settings > Advanced > Code Injection > Header (do this only once)

<script type="text/javascript">
function reveal(thelink)
   //Get the parts
   var thediv = thelink.parentElement.parentElement.children[1];
   var theinnerHTML = thelink.innerHTML;

if (theinnerHTML=="READ LESS")
       //Close the post
       thediv.style.display = "none";
       thelink.innerHTML="READ MORE";
       //Optional: close expanded posts
       var therests = document.getElementsByClassName("my-therest");
       for (var i = 0, len = therests.length; i < len; i++)
           therests[i].style.display = "none";
       var thelinks = document.getElementsByClassName("my-link");
       for (var i = 0, len = thelinks.length; i < len; i++)
           thelinks[i].innerHTML="READ MORE";
       //Reveal the rest of the post
       thediv.style.display = "block";
       thelink.innerHTML="READ LESS";

Move along. Nothing to see here.

Link to comment
  • 5 months later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.