Toggle
HTML
<h1>This example is using jQuery 1.8.3, try switching to 1.9.1</h1>
<p title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna ut urna imperdiet sagittis et eget risus. Pellentesque commodo tellus sed leo adipiscing, ut facilisis lorem vestibulum. Nulla convallis at nulla id faucibus. Etiam cursus velit sed dolor malesuada, ut dictum massa adipiscing. Integer ullamcorper est a vestibulum consectetur. Vivamus consequat congue scelerisque. Sed in elit posuere nunc fermentum blandit eget luctus tellus. Pellentesque placerat lorem sed porttitor facilisis. Cras dictum est gravida volutpat consequat. Mauris fringilla nisl vitae magna placerat pulvinar. Sed tempus dapibus metus sit amet sollicitudin. Vestibulum dui elit, aliquam sit amet felis ac, rhoncus rhoncus lectus.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna ut urna imperdiet sagittis et eget risus. Pellentesque commodo tellus sed leo adipiscing, ut facilisis lorem vestibulum. Nulla convallis at nulla id faucibus...[+]</p>
CSS
p{
cursor: pointer;
}
JavaScript
$('document').ready(function(){
var $txtEl, replacementTxt, originalTxt;
$txtEl = $('p');
replacementTxt = $txtEl.attr('title')+' [-]';
originalTxt = $txtEl.text();
$txtEl.toggle(function(){
$(this).text(replacementTxt);
}, function(){
$(this).text(originalTxt);
});
});