Read more in the category of how to do this in version 1.7?

[mario_xp]

I wanted to make a version of the category description from read more, unfortunately when I do it in the following way it does not recognize html tags

{if $category.description}
{if strlen($category.description) > 300}
<p class="cat_desc bordercolor bgcolor" id="category_description_short">{$category.description|truncate:300} <a href="#" onclick="$('#category_description_short').hide(); 
$('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='... More'}</a></p>
<p class="cat_desc bordercolor bgcolor" id="category_description_full" style="display:none">{$category.description}</p>
{else}
<p class="cat_desc bordercolor bgcolor">{$category.description }</p>
{/if}
{/if}

If I add "nofilter" to the code it gets even worse

{if $category.description}
{if strlen($category.description) > 300}
<p class="cat_desc bordercolor bgcolor" id="category_description_short">{$category.description|truncate:300 nofilter} <a href="#" onclick="$('#category_description_short').hide(); 
$('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='... More'}</a></p>
<p class="cat_desc bordercolor bgcolor" id="category_description_full" style="display:none">{$category.description nofilter}</p>
{else}
<p class="cat_desc bordercolor bgcolor">{$category.description nofilter}</p>
{/if}
{/if}

Because "read more" does not work properly, how can I do that there is no problem with the html encoding and the short version appears correctly?