Jquery : Create Expandable text box/ DIV areas

Recently I had one requirement, where I wanted to create the following functionality on an asp.net page.  If a block of text is too long I want to truncate the text at 300 characters and display a “more” link.  When the “more” link is clicked the original block of text should be displayed.

For Example my criteria was as followed

After clicking on more link/button:

I used JQuery Component for this, using 2 functions involved.

My code modules as follows

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script&gt;

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script&gt;

<script type=”text/javascript”

src=”http://ajax.googleapis.com/02 ajax/libs/jquery/1.4.2/jquery.min.js”></script>

<script type=”text/javascript”>

$(function() {

var finalText = $(‘#divBlock’).text();

// Pass control of the text block for limiting the number of chars

LimidDivText(‘#divBlock’,300);

// Expand on click of more link, pass both text block and link here

LinkExpand(‘#divBlock’,’#lnkMore’,finalText);

function LinkExpand(divBlock,lnkControl,finalText) {

$(lnkControl).live(“click”, function() {

$(divBlock).slideDown(“fast”);

$(divBlock).html(finalText);

});

};

function LimidDivText(divBlock,maxLimit) {

var validLength = $(divBlock).text().length – maxLimit;

if(validLength > 0)

{

$(divBlock).html($(divBlock).text().substring(0,maxLimit)).

append(‘ <a id=”lnkMore” href=”#”>more</a>’);

}

};

});

</script>

Advertisements