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 });
}
});
});
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments