HTML - How to make a "Read More" button

Question

On my website, 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.

Answer 1

<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
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>