I know this post is old but here is how i solved this problem thanks to stackoverflow...
{% with text=post.body %}
{% if text|wordcount > 56 %}
<p class="half-content" id="half-{{ post.pk }}">{{text|safe|linebreaks|truncatewords:50}}<a data-id="{{ post.pk }}" href="javascript:void();" class="show-hide-btn"><br>Read more</a></p>
<p class="full-content" id="full-{{post.pk }}" style="display: none;">{{ text|safe|linebreaks }}<a data-id="{{ post.pk}}" href="javascript:void();" class="show-hide-btn">Read less</a></p>
{% else %}
<p>
{{ text|safe|linebreaks }}
</p>
{% endif %}
{% endwith %}
this is the js code that you should add in your template also...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".show-hide-btn").click(function() {
var id = $(this).data("id");
$("#half-" + id).toggle();//hide/show..
$("#full-" + id).toggle();
})
})
</script>