Read More

ReadMoreNew.gif

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 or the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

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>

Site wide Code Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

Step 2: Insert the 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 there 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:

squarespace-plugin-content-accordion-dropdown-collapsable-hive-social-bristol-uk.png

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.

Step 3: 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.

Noughts & Ones