Advanced Search

toggle more / less text

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your 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. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.