Read More, Read Less Tab

grey.gif

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

Copy and paste the code below into the Header Code Injection box.

<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: solid 2px #FECB2F;}
.show{ font-size: 0px; height: 0px; padding: 0px; margin: 0px; overflow: hidden;}</style>

Step Three

Change the “border-bottom: solid 2px #FECB2F” to the line style and color code of your choice. Below are some line style ideas.

Dotted underline – (dotted 2px #FECB2F) 
Dashed underline – (dashed 2px #FECB2F) 
Solid underline – (solid 2px #FECB2F) 
Double underline (double #FECB2F) The double underline style needs the '2px' removed

Be sure to save your changes.

Step Four

Next, create a Markdown Block on the page you’d like the read more link to be.

Step Five

You will need to add 2 areas of text – one for the info shown ABOVE the Read More link and one for the info HIDDEN within the Read More link. Below is code you need to add within the Markdown Block and an example of how the text should look.

Please make sure that there is a full line break above and below the <span> code. Once finished, save and refresh the page.

<span class='readMore'>Read More</span>
static1.squarespace.png

When finished, save and refresh the page. 👍

Moov Labs