How To Create "Read More" Drop Down To Show Continuing Text In HTML For Blogger

 Last Update December 6th, 2016

Here is a tutorial on how to create a function when you click on the remark:"Read More", and it instantly drops down the continuing text in the same paragraph.

Then there is a remark: "Read Less" right below the full text.

When you click on it, the full text will immediately goes back to the original shorter text with the word "Read More" at the bottom.

Try out the example below. Click on "Read More". And then click "Read Less" at the bottom of the passage.

---

We all born into the world butt-naked and clueless; without a life instructional manual. We are left alone to find our own way through the mysteries of our own existence.

As we grow and acquire enough knowledge, we naturally start asking so-called unanswerable questions.

How did the world and universe come to exist? Why am I here? What is the meaning of life? What happens after I die? We start searching for meaning very early on in the course of human history.

The ancient Greeks developed mythology of gods and goddesses to answer many of life’s fundamental questions.

Then there were some who were not satisfied with the vague and inconsistent explanation offered by mythologies and religions. They preferred rational and logical answers about life, from birth to death and the world.

That's why we have thinkers or philosophers like Plato, Socrates and Aristotle. These folks questioned, probed and they need reason to understand why things happened as they did, and to find some sort of sense and security in our chaotic and confusing world.

They are the more popularly known figures of ancient Greek philosophy.

---

Here is how you do it:

Step One: Add Function Code

1. Log into your Blogger Account.

2. Click on "Layout".

3. You can use any one of the "Add a Gadget" box. Click on it.

4.  Now select and click on "HTML/JavaScript".

5. Paste the code below in the box provided.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://tester3.yolasite.com/resources/javascript/jtruncate.js"></script>

<script type="text/javascript">
// Settings for script
$(document).ready(function() {
$('.text').jTruncate({
length: 150, /* The number of characters to display before hidden. */

minTrail: 0, /* The minimum number of "extra" characters required to truncate. This line means to allows you to prevent shortening a section of text that is only a few characters longer than the specified length. */

moreText: "Read More",
lessText: "Read Less",
ellipsisText: "...", //
});
});

</script>

6. Click the orange color "Save" button.

Step Two: Break Up The Text

1. Go your paragraph of text where you want to have this effect.

2. Add this code at the beginning of the paragraph.

<div class="text">

3. Add this closing tag </div> at the end of the paragraph.

4. Then click on the orange color "Publish" button.

---

Note: As for my example, the digit 150 (highlighted in yellow), means AFTER 150 characters, the text will be hidden, followed with three dots and the remark: Read More.

You can change this digit (highlighted in white color) to your own choice.

You can also change the remark "Read More and Read Less to other terms, by replacing the words highlighted in white color.

---