{if $category->description}
              <div class="cat_desc">
                  <div id="category_description" class="truncated">{$category->description}</div>
                  <a class="more" href="#" onclick="return toggleMoreLess(this);" class="lnk_more">{l s='More'}</a>
              </div>
              <script type="text/javascript">
                {literal}
                  function toggleMoreLess(el) {
                    if ($(el).hasClass('more')) {
                      var div = $('#category_description');
                      div.removeClass('truncated');
                      div.addClass('full');
                      $(el).removeClass('more');
                      $(el).addClass('less');
                      $(el).html('{/literal}{l s='Less' js=1}{literal}');
                    }
                    else {
                      var div = $('#category_description');
                      div.removeClass('full');
                      div.addClass('truncated');
                      $(el).removeClass('less');
                      $(el).addClass('more');
                      $(el).html('{/literal}{l s='More' js=1}{literal}');
                    }
                    return false;
                  }
                {/literal}
              </script>
            {/if}
     
     {* TODO: add this to your css
     
    #category_description.truncated { height: 7em; overflow: hidden; text-overflow: ellipsis; }
    #category_description.full { height: auto; overflow: hidden; }
    
    *}