Jquery Mobile - Read more/less implementation

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

by Yuriy Galanter

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 class="less">
                Need "Read More" if it is not don't
            </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 ($('.less')[0].scrollWidth <= $('.less').width()) {
         $(".text-size").hide();
    }
    
    
    $(".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...");
        }
    });
});