Advanced Search

Return to Snippet

Revision: 19951
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