"I didn't have time to write you a short letter, so I wrote you a long one."

It takes effort to not write a long article. By "long article" I don't mean an article that is artificially padded; I mean one that contains a complete set of ideas, that begins, flows and ends well.

But nor do I want to show the user an immediate long article without being sure they really want to read it. It's nice to invite a reader to read an article, and get them to actively engage.

How to do this? A "Read More" button, of course. Like this one:

Read more...

Inspiration for this was originall an article I recently wrote on The Vanity Metric that I wanted to add some structure to. Later, I might add in the ability to track clicks on them. But for now, I'm going to see if it helps with bounce rate.

The "Read More" button

Creating a "Read More" button  involves five parts, but the first three parts all go together. And all the code is copy-paste.

  1. Write the CSS and Javascript for the button to work
  2. Create the button
  3. Create the start of the span that's in the "more" space.
  4. Write the text you want to hide (in the "more" section).
  5. End the span.

Parts 1, 2 and 3: Add he CSS, Javascript, the button and the start of the "more" section

Paste this code into your document where you want the "read more" button to go. Explanation is below.

<style> 
	.readmore {
    	color: #fff;
		background: #595959 no-repeat 50%;
		background-size: cover;
        text-align: center;
        display: inline-block;
        width: 50%;
        border-radius: 4px;
    }
    #more {display: none;} 
</style>

<script>
  function showReadMore() {
  var dots = document.getElementById("line");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("readmorebtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

<p class="readmore"
<button onclick="showReadMore()" id="readmorebtn">Read more...</button>
</p>

<hr id="line">

<span id="more">

First, the style <style>. This sets the style for the button, as well as making sure the "more" section is empty.

Second, the script <script>. This is triggered whenever the button is pressed. It hides and unhides the "more" section, plus it changes the text in the button.

Third, the horizontal line <hr>. This is the barrier below which the "more" section goes.

Finally, the beginning of the "more" section with the <span>.

Part 4: Write your "more" section

Put whatever you want in this section. Text, images, other objects... it all is going to be hidden because it's encapsulated by the "more" tag above.

Part 5: End the "more" section

Put this tag at the end of your document:

</span>

And you're done!

Everything between those lines is be hidden until you press the "Read More" button.

Good luck!