Add a Read More button to html

Question

I have a table that has columns that can grow based on the content in them but I would like to restrict that growth by adding a "Read More" link after two lines of a row for a particular column. So lets say I have a td as given below:

<table>
    <tr>
        <td role="gridcell" style="padding-bottom: 50px;">
            <p><span style="font-family:'Open Sans', Arial, sans-serif;font-size:14px;line-height:20px;text-align:justify;background-color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere.</span>
            </p>
            <p><span style="font-family:'Open Sans', Arial, sans-serif;font-size:14px;line-height:20px;text-align:justify;background-color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere.</span>
            </p>
        </td>
    </tr>
</table>

I would like to wrap both the paragraphs and only show two lines from the above td and append a "Read More" button such that upon clicking that it shows the remaining content. Any suggestions?

Code:

listItems.each(function(i, listItems) {
        var max_length = 150; // set the max content length before a read more link will be added

        // check for content length
        if ($(this).html().length > max_length) {
            // split the content in two parts
            var short_content = $(this).html().substr(0, max_length);
            var long_content = $(this).html().substr(max_length);

            // Alter the html to allow the read more functionality
            $(this).html(short_content +
                '<a href="#" class="read_more"><br/>Read More</a>' +
                '<span class="more_text" style="display:none;">' + long_content + '</span>');

            $(this).find('a.read_more').click(function(event) { // find the a.read_more element within the new html and bind the following code to it
                event.preventDefault(); // prevent the a from changing the url
                $(this).hide(); // hide the read more button
                $(this).parents().find('.more_text').show(); // show the .more_text span
            });
        }
    }

Answer 1

Here is really simple solution, which takes only the text from the target cell, split it by words, than replace the original cell html with the first 10 word, than append link, which click handler will append the rest of the original text:

 $(function() { // Get the cell var td = $("td.more"); // Get the text and split it into words var words = td.text().trim().split(" ").filter(function(w) { return (w.length > 0) && (w != "\\n"); }); // Get the basic text first 10 words var base = words.slice(0, 10) // Get the rest var rest = words.slice(10); // Replace cell original text with first 10 words td.html(base.join(" ")); // Append more link to the cell $("<a>", { html: " more..." }).css("color", "blue").appendTo(td).click(function() { // Remove the link $(this).remove(); // Append the rest of the original text td.append(" " + rest.join(" ")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="more" role="gridcell" style="padding-bottom: 50px;"> <p> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere. </span> </p> <p> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere. </span> </p> </td> </tr> </table>