Botão “Ver mais” em html

É muito simples. Basicamente, a mesma coisa que vemos no Facebook ou em outros sites. Tudo isso usando jQuery.

$(document).ready(function() {
    var max_length = 150; //Your taste.
    var div = $('#that_one_div_selector_is_way_too_long');

    div.each( function(event) {   //Expands selection
        if( $(this).html().length > max_length ) {

            // Selects text up to your limit
            var short_text = $(this).html().substr(0, max_length);

            // Selec text from your limit to the end.
            var long_text = $(this).html().substr(max_length);

            // Modified html inside of your div.
            $(this).html(short_text + "...<a href='#' class='view_more'>View more...</a>" + "<span class='rest_of_text' style='display: none;'>" + long_text + "</span>");

            //Finds the a.read_more and binds it with the click function
            $(this).find('a.view_more').click(function(event) {

                //Prevents the 'a' from changing the url
                event.preventDefault();
                //Hides the 'view more' button/link 
                $(this).hide(); 
                //Displays the rest of the text.
                $(this).parents(div).find('.rest_of_text').show();
            )};
        }
    )}; 
)};