Read More, Read Less Tab

Look Demo

A tab that expands with more info when clicked. This plugin uses site code injection, markdown block, and works with all template families.

How To Install

From your Squarespace account, go to Site Code Injection. 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: dotted 2px #FECB2F;} .show{ font-size: 0px; height: 0px; padding: 0px; margin: 0px; overflow: hidden;}</style>

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

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>

When finished, save and refresh the page.

Customize

Change the border-bottom 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

License

This plugin comes with an Unlimited Use License. View License Terms