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

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

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.):

DEMO

https://cello-cobalt-ygxa.squarespace.com/readmore

Password: showmestuff

HTML

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>

       <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>

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

    </div>

</div>

CSS

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

   .my-container {
   text-align:center;
   }
   div.my-post {
   display:block;
   vertical-align: top;
   text-align:left;
   margin-bottom:1em;
   padding:1em;
   background-color: #EEE;
   }
   div.my-excerpt, div.my-therest {
   font-size: 1em;
   line-height: 1.35em
   }
   div.my-excerpt > p {
   margin-top:0em; 
   }
   div.my-therest {
   display:none;   
   margin-top:.75em;   
   }
   .my-button {
   margin-top: .5em;
   font-size: .75em;
   text-decoration: underline;
   cursor:pointer;
   }
   .my-link {
   color:#AA0000;
   }

JAVASCRIPT

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";
       }
       else
       {
       //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";
       }
   }
</script>

@squaresporks Hi there, another person with the same question here. I clicked on the link and used the password but it says the page might have been moved or deleted. Would you mind making the page visible again if you still have it? Thank you so much in advance!