title: jQuery - animation toggle height by click on button
body: <p>I would like to show more text by clicking on a button.
  how can I animate this? I add a new class by click on the button. I want it to have a scroll down effect by add the new class. It doesn't work. Do I have to add the class to another div? or is the css wrong? Thanks for help.. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    const hiddenElement = $('.paragraph-small');
    $('.show-more').click(function(){
      hiddenElement.toggleClass('paragraph-large');
      $(this).toggleClass('active');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.paragraph-small {
    max-width: 500px;
    text-align: justify !important;
    margin: 1rem auto 3rem;
  }
  
  .hidden-text {
    max-height: 0;
    overflow: hidden;
  }
  
  .paragraph-large .hidden-text {
    max-height: 200px;
    overflow: visible;
    transition: all linear 2.5s;;
  }
  
  
  .show-more {
    width: 20px;
    height: 20px;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="toggle-box"&gt;
    &lt;div class="paragraph-small"&gt;
      &lt;div class="visible-text"&gt;
        &lt;span&gt;
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore                     magna aliquyam erat, sed diam voluptua.
        &lt;/span&gt;
      &lt;/div&gt;
                  
      &lt;div class="hidden-text"&gt;
        &lt;span&gt;
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore e dolore magna aliquyam erat, sed diam voluptua.
        &lt;/span&gt;
      &lt;/div&gt;
    
      &lt;div class="show-more"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>