Expanding div to scroll height

Question

I need to expand a div that has overflow set to hidden via css. When clicking on «expand» the hight of the div is expanded to the hight necessary to display the whole text. To a

Answer 1

your code does not cover DOM changes. Use the following:

$( ".aufklappen" ).on("click", function() {
  ...
});

Answer 2

Use a delegated event handler bound to the container/body:
try this:

$('body').on('click', '.aufklappen', function(){
  $('#hauptTextInhaltReduziert').animate({
    height: $('#hauptTextInhaltReduziert').get(0).scrollHeight
   }, 500, function(){
   $(this).height('auto');
  });
});

That is, bind to an element that exists at the moment that the JS runs (body exists when the page loads), and supply a selector in the second parameter to .on(). When a click occurs on body element jQuery checks whether it applied to a child of that element which matches .aufklappen the selector.