Discussion

1. 

   Chase May 3, 2010 at 12:04 am #

   Genius! Thank you so much!

   Reply
2. 

   Michael Jul 21, 2010 at 10:54 am #

   How can I replace to less/more text for two different buttons?

   Reply
   • 

     Sawyer Jul 21, 2010 at 3:06 pm #

     You can use CSS on the more/less links. Below the $(this).text(lessText); and $(this).text(moreText);, you can add something like $(this).addClass(lessBtn); and $(this).addClass(moreBtn); and then use CSS to style a.lessBtn and a.moreBtn.

     Hope this helps!

     Reply
3. 

   kb Jul 22, 2010 at 12:58 pm #

   Does this script have to use the [...] I’d rather just have a text link that says Read More or Read Less. Is this possible?

   Reply
   • 

     Sawyer Jul 22, 2010 at 9:42 pm #

     Just change
     $(".more-less").append(‘<p class="continued">[& hellip;]</p><a href="#" class="adjust" rel="nofollow"></a>’);
     to:
     $(".more-less").append(‘<a href="#" class="adjust" rel="nofollow"></a>’);
     to remove the [...]. Then the more and less text are variables (see lines 6 and 8).

     Reply
4. 

   Stu Green Oct 27, 2010 at 5:30 am #

   Hey, thanks for this – awesome work. I was applying it to one of my projects and thought I would extend it a little because sometimes you might not want to show the links on divs that are actually smaller than the AdjustHeight value, so I’ve adapted your code a little. Here:

   function showMore(){
   var adjustheight = 38;
   var moreText = “+ More”;
   var lessText = “- Less”;
   $(“.showmore .moreblock”).each(function(){
   if ($(this).height() > adjustheight){
   $(this).css(‘height’, adjustheight).css(‘overflow’, ‘hidden’);
   $(this).parent(“.showmore”).append(‘[…] ‘);
   $(this).parent(“.showmore”).find(“a.adjust”).text(moreText);
   $(this).parent(“.showmore”).find(“.adjust”).toggle(function() {
   $(this).parents(“div:first”).find(“.moreblock”).css(‘height’, ‘auto’).css(‘overflow’, ‘visible’);
   $(this).parents(“div:first”).find(“p.continued”).css(‘display’, ‘none’);
   $(this).text(lessText);
   }, function() {
   $(this).parents(“div:first”).find(“.moreblock”).css(‘height’, adjustheight).css(‘overflow’, ‘hidden’);
   $(this).parents(“div:first”).find(“p.continued”).css(‘display’, ‘block’);
   $(this).text(moreText);
   });
   }
   });
   }

   showMore();

   Reply
   • 

     JEff Jan 24, 2011 at 10:52 am #

     can I see a demo or some code of this where it only adds the ellipse (show more text) to the div if it is greater than set height.

     Reply
   • 

     Kneeko May 25, 2011 at 1:53 pm #

     I’m not sure how you are using this extension of the code, as I’ve tried to use it and it doesn’t seem to do anything. Do you have an example of it in action that I could look at?

     Reply
5. 

   brent Jan 4, 2011 at 9:36 pm #

   Is there a way to animate the transition? I’ve tried adding animate(), but it is having problems finding the height of the containing div for some reason.

   Reply
6. 

   Pierre Apr 21, 2011 at 3:36 am #

   I´m starting at scripting, and I really would like to use the code on the Jquery part.

   I copy and paste :
   “$(function(){

   // The height of the content block when it’s not expanded
   var adjustheight = 80;
   // The “more” link text
   var moreText = “+ More”;
   // The “less” link text
   var lessText = “- Less”;”
   [..................]

   on a new text file named: jquery.js?
   Please help me set this up.
   Thanks.

   Reply
7. 

   Julian Apr 28, 2011 at 6:48 am #

   NICE!

   Reply
8. 

   Michael Jun 24, 2011 at 2:42 pm #

   How would I make the text bold?

   I’ve tried:

   function() {
   $(this).parents(“div:first”).find(“.more-block”).css(‘height’, adjustheight).css(‘overflow’, ‘hidden’).css(‘font-weight’, ‘bold’);
   $(this).parents(“div:first”).find(“p.continued”).css(‘display’, ‘block’).css(‘font-weight’, ‘bold’);
   $(this).text(moreText);
   });

   but still nothing. any help would be greatly appreciated!

   Thanks,

   Michael

   Reply
   • 

     Bharath Jun 26, 2011 at 12:20 pm #

     which text you want to make it bold????

     Reply
9. 

   Bharath Jun 25, 2011 at 2:55 am #

   hey guyz, it want this “+More” button on the right side rather than left side. How can i adjust it ??

   Reply
10. 

    Bharath Jun 26, 2011 at 12:19 pm #

    @ Michael

    which text you want to make it bold????

    Reply
11. 

    David Jul 5, 2011 at 4:51 pm #

    Is there a way to tweak this script so that the transition has a sliding effect, rather than an instantaneous resize?

    Reply
12. 

    Jan Jul 20, 2011 at 8:05 am #

    Just like David and Brent (see above), I’m interested in getting help with a nice sliding effect. Since the initially visible text on my page is displayed with a smooth animation, the instant way that the script works gives an unprofessional impression. I’ve spent the good part of the last two days trying to add an animation to this script, but without success. Anyone that can help?

    Reply
13. 

    Saranya Aug 12, 2011 at 5:58 am #

    Great work.

    How to make the more,less invisible if there is no text to display.

    Reply
14. 

    mick Aug 15, 2011 at 7:21 pm #

    Hey. This is how I edited the code and managed to get the sliding effect.

    $(document).ready(function(){
var maxheight=198;
var moreText = "more";
var lessText = "less";

    $('.less-content').each(function() {
    height=$(this).children('.more-content').height();
    if(height>maxheight) {
    $(this).children('.more-content').css('height', '178px');
    $(this).children('.more-content').css('overflow', 'hidden');
    $(this).append('');
    $('.continued').text(moreText);
    }
    });

    $(".continued").toggle(function() {
    var height = $(this).attr("data-height");
    height=parseInt(height)+20;
    $(this).parents("div:first").find(".more-content").animate({height:height});
    $(this).text(lessText);
    }, function() {
    $(this).parents("div:first").find(".more-content").animate({height:maxheight});
    $(this).text(moreText);
    });

    });
    Hope it helps

    Reply
    • 

      faith Sep 20, 2011 at 9:49 am #

      can u explain it with the html attached to it??

      Reply
15. 

    Javier Azaret Aug 17, 2011 at 9:35 am #

    I created a jQuery plugin for this using this blog as a guide! You don’t need any special classes it handles it all automatically. Just select the element in jQuery and use .moreOrLess() Check it out here:

    .moreOrLess(options)

    where Options is an object that can have adjustHeight, moreText, and lessText properties. Defaults are: 80, ‘+ More’, ‘- Less’.

    See the code and the action here:

    http://jsfiddle.net/jazaret/TcLqd/

    Reply
    • 

      Javier Azaret Aug 17, 2011 at 10:43 am #

      Slight change with bug fix here:

      http://jsfiddle.net/jazaret/TcLqd/2/

      Reply
      • 

        Roh Aug 31, 2011 at 3:28 am #

        Hey, Javier.

        Could you post the entire working code please? I tried copying the different parts into an html but it doesn’t work. Also, how can i use it so that i can define different div id’s to have different height more-less effect?

        So one div should have same effect with say height 20 while other has height 60.

        Sorry but i’m new to web dev.

        Thanks!

        Reply
16. 

    palazzo Sep 6, 2011 at 5:09 am #

    great code.. i want to make it if only 1 or 2 line of sentence then no need to show the ‘more’ link… need help ASAP

    thanks

    Reply
    • 

      shane Sep 14, 2011 at 10:35 am #

      Hey palazzo,
      This is what I did. If the height of the div is less than the adjustheight it won’t show the button, otherwise it will.

      $(document).ready(function () {
             showMore();
          });
      
          function showMore(){    
      
              // The height of the content block when it's not expanded
              var adjustheight = 80;
              // The "more" link text
              var moreText = "+  More";
              // The "less" link text
              var lessText = "- Less";
      
              $(".more-block").each(function () {
      
                  if ($(this).height() > adjustheight) {
      
                      // Sets the .more-block div to the specified height and hides any content that overflows
                      $(this).css('height', adjustheight).css('overflow', 'hidden');
      
                      // The section added to the bottom of the "more-less" div
                      $(this).parent('.more-less').append('[…]');
      
                      $("a.adjust").text(moreText);
      
                      $(".adjust").toggle(function () {
                          $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
                          // Hide the [...] when expanded
                          $(this).parents("div:first").find("p.continued").css('display', 'none');
                          $(this).text(lessText);
                      }, function () {
                          $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
                          $(this).parents("div:first").find("p.continued").css('display', 'block');
                          $(this).text(moreText);
                      });
      
                  }
              });
      
          }

      Reply
      • 

        palazzo Sep 15, 2011 at 3:37 am #

        dear shane,

        thanks for your reply. i appreciate it. it works for my project.

        Reply
    • 

      Rahul Dec 2, 2011 at 8:09 am #

      hi palazzo, i want to use this in my aspx page … inside the grid view will suggest me how to use this dynamically.

      rkumar670@gmail.com

      Reply
17. 

    Dick Kirkland Sep 22, 2011 at 3:50 pm #

    Thanks for this great tutorial. Also, thanks go out to Mr. Azaret for the great animation example on jsFiddle!

    Reply
18. 

    Mihun Oct 8, 2011 at 12:19 am #

    I need your help…. In my case i need to have a link read more if there is data beyond a limit say height 80px …… How would i do that and my div tags goes like this

    the data is inside the profile _info div my code is like this…

    Knome.ProfileInfoSlider = function() {
    var adjustheight = “80px”;
    var moreText = “More”;
    var lessText = “Less”;
    $(“.profile_details #profile_info”).css(‘height’, adjustheight).css(‘overflow’, ‘hidden’);
    $(“a.adjust”).text(moreText);
    $(“.adjust”).toggle(function() {
    $(this).parents(“div:first”).find(“.profile_details”).css(‘height’, ‘auto’).css(‘overflow’, ‘visible’);
    $(this).parents(“div:first”).find(“#profile_info.continued”).css(‘display’, ‘none’);
    $(this).text(lessText); }, function() {
    $(this).parents(“div:first”).find(“.profile_details”).css(‘height’, adjustheight).css(‘overflow’, ‘hidden’);
    $(this).parents(“div:first”).find(“#profile_info.continued”).css(‘display’, ‘block’);
    $(this).text(moreText);

    });

    });

    it doesnt give me the link it only hides the data

    Reply
19. 

    Naveen Kumar Oct 9, 2011 at 10:24 am #

    thanks for tutorial and great discussion in between.

    Reply
20. 

    Reamon Oct 16, 2011 at 10:35 am #

    This code does not work in conbination with wordpress 3.2.1 ?
    Have tried to past it in the function.php, but that does not work.
    Have tried to past it in the head.php with at the begining and end, it does not work….

    Reply