JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<table>
    <tr>
        <td>Cells with lots of text so they are over 25 charaters</td>
                <td>Cells with lots of text so they are over 25 charaters</td>
                <td>Cells with lots of text so they are over 25 charaters</td>
    </tr>
</table>

CSS

td p {
    display:none;
    }
td span {
    cursor:pointer
}

JavaScript

$("td").each(function () {
    if ($(this).text().length > 25) {
        $(this).html($(this).text().substr(0, 25) + "<span>...more&nbsp;info</span><p>" + $(this).text().substr(25) + "</p>")
    }

})
$(document).on("click", "td span", function () {
    $(this).hide()
    $(this).next().css("display", "inline").show()
})