Question

E.g. I have a div that contains all the text like:

<div class="text-container">
<p>
Though we welcome the idea of a smaller connector, we're miffed that Apple couldn't just adopt the semi-industry standard of Micro-USB. That would make things easier for smartphone users across the globe. Yet, even so, the smaller connector may be a smart move for the future. The 30-pin connector has been around since 2003, long before the iPhone even existed: frankly, it's a dust magnet. A smaller connector helps shave extra space to achieve a smaller phone with perhaps a bigger battery. The new connector cable will mainly be used for syncing and charging by most people who own an Apple TV or Bluetooth/AirPlay accessories.
</p>
</div>

And I would like to create something like this:

<div class="text-container">
<p>
Though we welcome the idea of a smaller connector...<a href="some-javascript-to-show-more">[show more]</a>
</p>
</div>

I guess I should get all the content of the div and then Find the first e.g. 50 character and put there a link and all the other text put in some div which will be hidden, and after the click on the link the other stuff show up.

It should be toggle-like and change the text from [show more] to [show less] if it is expanded and vice versa.

Any advice how to achieve this with plain javascript and jquery itself and without other jQuery plugins?

Answer 1

Here is another solution.

It doesn’t simply cut the words in the middle but checks endings, punctuation, and long words.

$(".text-container p").each(function() {
    var val = $.trim(this.innerHTML),
        parsed = val.split(/\s+/),
        cut = parsed;

    // for each word
    for (var i = 0, k = 0; i < parsed.length; i++) {
        k += parsed[i].length + 1;

        if (k - 1 > 50) {
            cut = parsed.slice(0, i);
            break;
        }
    }

    // if one long word
    if (cut.length == 0) {
        cut.push(parsed[0].substring(0, 50));
    }

    val = cut.join(" ");

    // if the text is long enough to cut
    if (cut.length != parsed.length) {
        this.innerHTML = val.replace(/[.,;?!]$/, "")
            + "<span>...</span> ";

        $("<span />")
            .css("display", "none")
            .html(parsed.slice(cut.length).join(" ") + " ")
            .appendTo(this);

        $("<a />", {
            href : "#",
            text : "[show more]"
        }).on("click", function(e) {
            var sh = this.innerHTML == "[show more]";
            $(this).prev("span").toggle(sh).prev("span").toggle(!sh);
            this.innerHTML = sh ? "[show less]" : "[show more]";
            e.preventDefault();
        }).appendTo(this);
    } else {
        this.innerHTML = val;
    }
});

DEMO: http://jsfiddle.net/xRuch/