Jquery Mobile - Read more/less implementation

Example of Jquery mobile to implement the read more/less when the description is too long.

by Maiki Nahara

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" id="p1">
<div data-role="content">    
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Item Title</li>
        <li>
            <div>
                Need to detect if this text is long enough toffffffffffffffffffffffff show the "Read More" 
                <!-- if it is then use the ellipsis  -->
            </div>
            <div class="text-size">Read more...</div>
        </li>
    </ul>     
</div>

</div>

CSS

.less{
    word-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.more{
    white-space: normal;
}

.text-size{
    display: block;
    text-align: right;
    padding-top: 10px;
    color: blue !important;
    cursor: pointer;
}

JavaScript

$(document).bind('pageshow', function() {
    if($(".ui-li > div").height() > 20) {
        $(".ui-li > div").addClass("less");
        $(".text-size").click(function(){
            $(".ui-li > div").toggleClass("less");
            if($(".text-size").html() == "Read more...")
            {
                $(".text-size").html("Read less...");
            }
            else
            {
                $(".text-size").html("Read more...");
            }
        });
    } else {
        // one liner
         $(".text-size").hide();
    }
});