jQuery How to Truncate Text “show more” “show less” content script
Cat: jQuery Examples - Cut and Paste Scripts
There are 3 steps to making the following jquery.truncate.js code work in your page.
<script>
$(document).ready(function() {
jQuery.fn.truncate = function( max, settings ) {
settings = jQuery.extend( {
chars: /s/,
trail: [ “…”, “” ]
}, settings );
var myResults = {};
var ie = $.browser.msie;
function fixIE( o ) {
if ( ie ) {
o.style.removeAttribute( “filter” );
}
}
return this.each( function() {
var $this = jQuery(this);
var myStrOrig = $this.html().replace( /rn/gim, “” );
var myStr = myStrOrig;
var myRegEx = /</?[^<>]*/?>/gim;
var myRegExArray;
var myRegExHash = {};
var myResultsKey = $(“*”).index( this );
while ( ( myRegExArray = myRegEx.exec( myStr ) ) != null ) {
myRegExHash[ myRegExArray.index ] = myRegExArray[ 0 ];
}
myStr = jQuery.trim( myStr.split( myRegEx ).join( “” ) );
if ( myStr.length > max ) {
var c;
while ( max < myStr.length ) {
c = myStr.charAt( max );
if ( c.match( settings.chars ) ) {
myStr = myStr.substring( 0, max );
break;
}
max–;
}
if ( myStrOrig.search( myRegEx ) != -1 ) {
var endCap = 0;
for ( eachEl in myRegExHash ) {
myStr = [ myStr.substring( 0, eachEl ), myRegExHash[ eachEl ], myStr.substring( eachEl, myStr.length ) ].join( “” );
if ( eachEl < myStr.length ) {
endCap = myStr.length;
}
}
$this.html( [ myStr.substring( 0, endCap ), myStr.substring( endCap, myStr.length ).replace( /<(w+)[^>]*>.*</1>/gim, “” ).replace( /<(br|hr|img|input)[^<>]*/?>/gim, “” ) ].join( “” ) );
} else {
$this.html( myStr );
}
myResults[ myResultsKey ] = myStrOrig;
$this.html( [ “<div class=’truncate_less’>”, $this.html(), settings.trail[ 0 ], “</div>” ].join( “” ) )
.find(“.truncate_show”,this).click( function() {
if ( $this.find( “.truncate_more” ).length == 0 ) {
$this.append( [ “<div class=’truncate_more’ style=’display: none;’>”, myResults[ myResultsKey ], settings.trail[ 1 ], “</div>” ].join( “” ) )
.find( “.truncate_hide” ).click( function() {
$this.find( “.truncate_more” ).css( “background”, “#FFF” ).fadeOut( “normal”, function() {
$this.find( “.truncate_less” ).css( “background”, “#FFF” ).fadeIn( “normal”, function() {
fixIE( this );
$(this).css( “background”, “#FFF” );
});
fixIE( this );
});
return false;
});
}
$this.find( “.truncate_less” ).fadeOut( “normal”, function() {
$this.find( “.truncate_more” ).fadeIn( “normal”, function() {
fixIE( this );
});
fixIE( this );
});
jQuery(“.truncate_show”,$this).click( function() {
$this.find( “.truncate_less” ).css( “background”, “#FFF” ).fadeOut( “normal”, function() {
$this.find( “.truncate_more” ).css( “background”, “#FFF” ).fadeIn( “normal”, function() {
fixIE( this );
$(this).css( “background”, “#FFF” );
});
fixIE( this );
});
return false;
});
return false;
});
}
});
};
});
</script>
<!– 2) HOW TO USE: put the following code in the HEAD of your page or next to the div you’re calling –>
<script>
$(document).ready(function() {
$(“.example_1″).truncate( 90, {
chars: /s/,
trail: [ ” ( <a href=’#’ class=’truncate_show’>more</a> . . . )”, ” ( . . . <a href=’#’ class=’truncate_hide’>less</a> )” ]
});
});
</script>
<!– 3) HOW TO USE: put the following in the BODY of your code encapsulating the text you want to truncate –>
<div class=”example_1″>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a lorem. Maecenas vel risus et eros vulputate sagittis. Aliquam at tortor. Nunc sit amet elit sit amet quam pellentesque condimentum. Etiam id nulla vitae massa imperdiet varius. Duis a quam. Duis faucibus lobortis velit.
</div>