Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


lancecassell

Question

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

Edited by lancecassell
Initial Revision
Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 1

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>



Edited by squaresporks

Move along. Nothing to see here.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...