0

I'm trying to make a "More" functionality for comments.

How I'm trying to make it work:

  • I split comment in 2 parts - 1st 200 symbols and the rest of the symbols.
  • The rest of the symbols are placed in a <span class="hidden_comment_container" ></span> which by default gets display:none
  • Toggle to show the rest is placed if needed (if comment length > 200 symbols).

This is working more or less fine (jsfiddle demo) but there are 2 problems.

  1. Upon slidedown, hidden_comment_container receives display:inline-block and messes up things a bit, since it gets transferred to a new line (check demo to see what I mean)
  2. When sliding down and sliding up, near the end of animation you can notice some twitching.

Can anyone please help me solve these 2 problems?

Igor Yavych
  • 4,166
  • 3
  • 21
  • 42

1 Answers1

0

The first one can be resolved by adding the following to the case when the remaining text is hidden.

$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() { 
        $('.hidden_comment_container').css('display', 'inline');
    });

Basically you're changing the display attribute of the .hidden_comment_container selector as I believe slideDown is adding a display:inline-block to it which would cause it to jump a line.

Fiddle here

Answer to point 2 can be found in Basic jQuery slideUp and slideDown driving me mad!; basically you need to explicitly add the height of the element before hiding / showing it.

As a side note the css property content can only be used with the pseudo elements :after and :before; I updated my fiddle accordingly.

An alternative solution

Have a look at this script, it does everything you need! I tested it already on another project and it works like a charm: jquery plugin to truncate elements based on height instead of number of characters

Community
  • 1
  • 1
benomatis
  • 5,536
  • 7
  • 36
  • 59
  • Even though it does the trick, it looks kinda ugly. Maybe it would look better if display was changed at the start of the animation instead of when animation is completed. As for 2nd problem, toggle and observe bottom border – Igor Yavych Mar 25 '14 at 20:29
  • Nevermind content, I just used it for fiddle, on site I use picture from sprite. – Igor Yavych Mar 25 '14 at 20:30
  • 1. don't think you can have both, sliding and inline as the sliding happens vertically and inline is horizontal... 2. you mean that it's gradually sliding, row by row instead of consistently? – benomatis Mar 25 '14 at 20:40
  • you could potentially solve the "ugliness" of 1 by quickly hiding the beginning of that line (before the 3 dots), and then apply the slideDown to that and the rest of the text... if it makes sense... – benomatis Mar 25 '14 at 20:42
  • how am I even supposed to do that? And no, I mean how it's twitching at the end of animation. – Igor Yavych Mar 25 '14 at 20:51
  • according to https://api.jquery.com/slideDown/ there it should be possible to call function when animation start. Not sure how to do that – Igor Yavych Mar 25 '14 at 20:59
  • I added a solution for point 2, no more twitching... ;) and for the whole thing, I also included a good, already working and tested script for read more... ;) – benomatis Mar 25 '14 at 21:52