HTML - How to make a "Read More" button

On my website, Link, I have my blog and I want each card to have a read more button. I specifically want it to only show x words (NOT characters) when collapsed, and then show the whole text when expanded. I do not want to have a button that takes to another page that has the full content, as I am using my own built CMS which automatically adds posts from a form.

I have tried readmore.js but that doesnt seem to work at all. It does nothing. I have also tried jQuery.dotdotdot, which also seems to not work

This is a very strange thing that I have not been able to figure out. None other SO Q & A's have helped that I have seen.


<p><a onclick="javascript:ShowHide('HiddenDiv')">read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;"><font face="Arial" size="+2" 

color="#306Eff" align="right">put the rest of the text here
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
if(document.getElementById(divId).style.display == 'none')
document.getElementById(divId).style.display = 'none';
// ]]></script>

Need Your Help

Error running XUnit tests in VS2013 / ReSharper 8 - xunit.dll not found

unit-testing visual-studio-2013 xunit resharper-8.0

I've upgraded all the xUnit NuGet packages in my solution to XUnit 2.1 in the hope of fixing some problems I had running my xUnit tests, but I'm getting the same problem as before, which is: