How to add a javascript transition to jquery expanding text?

Question

I've got a problem with creating a transition for a collapsing text-jquery plugin I've found. Unfortunatley I've go almost no understanding to javascript. At the bottom I added "&&(this).show('fast');" but it didn't work. Hopefully you can help.

$(document).ready(function () {
  var maxheight=16;
  var showText="Weiterlesen";
  var hideText="Zusammenklappen";

  $('.expand').each(function () {
    var text = $(this);
    if (text.height() > maxheight){
        text.css({ 'overflow':'hidden','height': maxheight + 'px' });

        var link = $('<p class="weiter" id="noselect"><a>' + showText + '</a></p>');
        var linkDiv = $('<div></div>');
        linkDiv.append(link);
        $(this).after(linkDiv);

        link.click(function (event) {
          event.preventDefault();
          if (text.height() > maxheight) {
              $(this).html('<a>' + showText + '</p>');
              text.css('height', maxheight + 'px')
              &&(this).show('fast');
          } else {
              $(this).html('<a>' + hideText + '</p>');
              text.css('height', 'auto')
              &&(this).show('fast');
          }
        });
    }       
  });

});

Please remove the &&. It does not make sense to use it there — Jonas Wilms, May 23 '17 at 20:07

Mathias Rønnow Nørtoft · Answer 1 · 2017-05-23T20:14:55.763

0

Try Changing it to this

 $(this).html('<a>' + hideText + '</p>');
 text.css('height', 'auto');
 $(this).show('fast');

This is using the correct JQuery syntax, wether it works or not depends on what "this" is.

edited May 23 '17 at 20:14

answered May 23 '17 at 20:10

Mathias Rønnow Nørtoft

783
9
27

Sadly doesn't work. I've got a p-tag called .expand with much text inside of it. This tag has no styles. It's simply for identifying it in the javascript. – Benny May 23 '17 at 20:44

Jonas Wilms · Answer 2 · 2017-05-23T20:51:19.640

0

(this).show();

wont work. this is an HTML Element , and it has no show property. You want the jquerys object property.

jQuery(this)//get the jquery object of that html el
.show();//call the function on that

$ is just a shortform of jQuery. So:

$(this).show();

Note this is the link, but you want to show the text (wich is already a jquery object):

text.show();

Concerning the && ( the AND operator):

false && alert("nope");
true && alert("yes");
a() && b(); //b is just called if a() is truthy => can create bugs in your case

Ita not neccessary / useful to use this operator here. However, you could use the Comma operator, but its common to simply use two statements...

However, if ive got you right, its not neccessary to show but rather to add a transition. That can be done with css:

.expand{
 transition:all 2s ease;
}

Note this doesnt work for height, but for max-height, so one may set height:auto and change max height from 0px to 500%...

edited May 23 '17 at 20:51

answered May 23 '17 at 20:18

Jonas Wilms

132,000
20
149
151

Thanks for clarification! Unfortunately the css style does not seem to do anything. Is there something I can do to help all of you understanding the problem? – Benny May 23 '17 at 20:43
@benny i think theres a problem with height: auto and transitions. May look that up i bet theres another thread for it... – Jonas Wilms May 23 '17 at 20:49
@benny voilá https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Jonas Wilms May 23 '17 at 20:50

How to add a javascript transition to jquery expanding text?

2 Answers2