BackToTopButtonNew.gif

Read More

Our Read More plugin automatically targets text blocks that are over 100px high and reduces their height by hiding content behind a 'read more' link. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area of your site (instructions below). Values in bold can be changed to suit your branding and site design.

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script>$(document).ready(function(){$(".sqs-block-markdown .readMore").each(function(){$(this).parent().nextAll().toggleClass("show")}),$(".sqs-block-markdown .readMore").click(function(){"Read More"==$(this).text()?$(this).text("Read Less"):$(this).text("Read More"),$(this).parent().nextAll().toggleClass("show")})});</script><style>.readMore{cursor: pointer; border-bottom: dotted 2px #FECB2F;}
.show{ font-size: 0px; height: 0px; padding: 0px; margin: 0px; overflow: hidden;}</style>
Underline Style Options:
This is a dotted underline (dotted 2px #FECB2F)
This is a dashed underline (dashed 2px #FECB2F)
This is a solid underline (solid 2px #FECB2F)
This is a double underline (double #FECB2F) *the double underline style need the '2px' removed
 

Site wide Code Injection:

 

 

Step 2: Create a Markdown Block

Create a Markdown Block where you want the content to be placed and paste in your text using the following format:
**Please ensure that then is a full line break above and below the <span> code.**
 

**TEXT CONTENT #1 GOES HERE** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue.


<span class='readMore'>Read More</span>

OPTIONAL HEADING
----------------
**TEXT CONTENT #2 GOES HERE** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus.


You can format your text to include different heading styles using the text toolbar within the markdown block OR style your text exactly using <tags> as you would normally.

Note: you will need to refresh your browser window after saving your page in order for the plugin to display correctly.


Here's a live example of the Read More plugin using the Markdown block content above:

TEXT CONTENT #1 GOES HERE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue.

Read More

OPTIONAL HEADING

TEXT CONTENT #2 GOES HERE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus. Nullam in dui quam. Etiam et dictum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, diam eu pulvinar pulvinar, risus orci suscipit augue. vitae dignissim risus nisi quis tellus.

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.