Only display # words and hide the rest with the option to toggle more

javascript, jquery

Solution

You could store the full value in a `data-*` variable and hookup a click event to show the full value when its clicked.

A working examples is http://jsfiddle.net/R7DeS/

<div id="divData" data-full-content="this is text pulled from the database and being displayed in this div">
    this is text pulled from the ...
</div>

Your js will be as below.

$(function(){

    $("#divData").on("click", function(){

        var str = $("#divData").data("full-content");

        $("#divData").html(str);


    });

});

And of course you can choose for your full data to come from somewhere else. I've simply used the `data-*` option to simplify it.

Problem

Having a jQuery issue here. I am pulling data from a database and displaying it in a div. My problem is, for usability purposes, I only want to display the first 10 words, or 50 characters. my example is: ``` <div> this is text pulled from the database and being displayed in this div </div> ``` and what I want to achieve is: ``` <div> this is text pulled from the ... </div> ``` Where ... is a toggle to show the rest of the text if the user clicks on it. Idea is to save space in mobile land. Is this at all possible? Thank you in advance.

Original source