jQuery dotdotdot on accordion menu

Question

So I have a set of accordions that I use to show and hide extra content. I am using jQuery's .animate() to do so (well in this case it is using velocity, but essentially the exact same). The closed height shows a few lines of text (height: 95px), and the open height animates to height: auto, (kind of, there is a little trick to get the auto height). And the same in reverse, it animates to the closed height.

My issue is, I am trying to add jQuery dotdotdot http://dotdotdot.frebsite.nl/ to have the closed ones truncated. I can of course get this to work on load, that is the commented portion at the top.

I have created a codepen that has everything already loaded up. I was just hoping someone could help me get the dotdotdot portion working.

Here is the link to the codepen too: http://codepen.io/anon/pen/pvaroR

jQuery(function($){

  //$('.accordion-content').dotdotdot();

  $('.accordion-title').on('click', function(){
    var content = $(this).next();

    if ($(this).parent().hasClass('open')) {
      content.velocity({ 'height' : 95 });
      $(this).parent().removeClass('open').addClass('closed');
    } else {

      // Sets height to auto quickly
      content.css({ 'height' : 'auto' });

      // Store that value in a variable
      var contentHeight = content.height();

      // Sets height back to "closed" height
      content.css({ 'height' : 95 });

      $(this).parent().removeClass('closed').addClass('open');

      // animates to strored variable height
      content.velocity({ 'height' : contentHeight });

    }
  });
});

Tim Banks · Accepted Answer · 2015-02-16T02:01:59.603

1

The dotdotdot plugin doesn't make it very easy to get the original content back in to the original form. I used a combination of the originalContent event and then reinitializing the dotdotdot on the accordion content.

The pseudo-code looks like this:

when title is clicked {
    if content was open {
        call .dotdotdot on content
        animate height down to fit content
    } else content was closed {
        get original content and put it back
        get new height, set back to lower height, animate to regular height
    }
}

You can view the udpated CodePen here: http://codepen.io/anon/pen/XJZaYP

Updated CodePen with the .dotdotdot() being called in the velocity callback: http://codepen.io/anon/pen/myXzwW

edited Feb 16 '15 at 02:01

answered Feb 13 '15 at 22:52

Tim Banks

7,099
5
31
28

That works for me!! I did add to it so that dotdotdot doesn't fire until right as the animation finishes by adding a setTimeout on it. Seen here: http://codepen.io/anon/pen/KwQoxV . If this is not the right way I should do this please let me know! – Robby Huska Feb 14 '15 at 23:53
1

Glad that worked for you! What you did with the setTimeout does in fact work, but I would recommend using the callbacks on the velocity method. You can pass a callback function as the third parameter and then call .dotdotdot() inside of the callback. View the updated pen: http://codepen.io/anon/pen/myXzwW – Tim Banks Feb 16 '15 at 02:01
Thanks Tim! I knew there had to be a better way, this is perfect! – Robby Huska Feb 17 '15 at 04:17

jQuery dotdotdot on accordion menu

1 Answers1