Revision: 19951
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2009 01:44 by shabbar
Initial Code
<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"); }); });
Initial URL
http://www.myphpetc.com/2009/01/jquery-toggle-more-less-text.html
Initial Description
Initial Title
toggle more / less text
Initial Tags
jquery
Initial Language
JavaScript