Posted By

shabbar on 11/04/09


Tagged

jquery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

millano5


toggle more / less text


 / Published in: JavaScript
 

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

  1. <p id="mytext" style="'width:260px;height:200px;overflow:hidden;'">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
  3. varius quis, molestie sit amet, justo. Vestibulum sed elit.
  4. Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
  5. In eget augue a nulla auctor interdum.
  6. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  7. Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
  8. ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
  9. Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
  10. sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
  11. placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</p>
  12. <a href="#" id="adjust">more</a>
  13.  
  14. Next we place our toggle function inside our javascript file as such:
  15.  
  16.  
  17. $(document).ready(function() {
  18. var adjustheight = 200;
  19. $("#adjust").toggle(function() {
  20. $('#mytext').css('height', 'auto').css('overflow', 'visible');
  21. $(this).text("less");
  22. }, function() {
  23. $('#mytext').css('height', adjustheight).css('overflow', 'hidden');
  24. $(this).text("more");
  25. });
  26. });

Report this snippet  

You need to login to post a comment.