How to hide/show more text within a certain length (like youtube)

Question

I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.

The link w

Answer 1

So much answers and all them good, but I will suggest my own, maybe it will be usefull for somebody.

We have HTML in the template:

JS function for toggling which:

function show_more_less(task_id) {

    var btn = jQuery('#listing-item-excerpt-' + task_id).find('.more_less_btn');
    var txt_container = jQuery('#listing-item-excerpt-' + task_id).find('.complete_txt');
    var state = parseInt(jQuery(btn).data('state'), 10);
    if (state === 0) {
        jQuery(txt_container).show();
        jQuery(btn).text(jQuery(btn).data('less-txt'));
        jQuery(btn).data('state', 1);
    } else {
        jQuery(txt_container).hide();
        jQuery(btn).text(jQuery(btn).data('more-txt'));
        jQuery(btn).data('state', 0);
    }
}