Posted By

shabbar on 11/04/09

Tagged

jquery

Versions (?)

Last Edited at 11/04/09 01:44am

Statistics

Viewed 610 times

Favorited by 0 user(s)

Related snippets

toggle more / less text

/ Published in: JavaScript

Highlighted TextExpand

<p id="mytext" style="'width:260px;height:200px;overflow:hidden;'">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
varius quis, molestie sit amet, justo. Vestibulum sed elit.
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
In eget augue a nulla auctor interdum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</p>
<a href="#" id="adjust">more</a>

Next we place our toggle function inside our javascript file as such:

$(document).ready(function() {
var adjustheight = 200;
$("#adjust").toggle(function() {
$('#mytext').css('height', 'auto').css('overflow', 'visible');
$(this).text("less");
}, function() {
$('#mytext').css('height', adjustheight).css('overflow', 'hidden');
$(this).text("more");
});
});

URL: http://www.myphpetc.com/2009/01/jquery-toggle-more-less-text.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.