title: how to text fade out on click function?
body: <p>I want to fade out and fade in some text of my p element that I've hidden with the help of max-height css  when a button is clicked . I tried using code snippet that I found at css tricks ie <a href="https://css-tricks.com/text-fade-read-more/" rel="nofollow noreferrer">https://css-tricks.com/text-fade-read-more/</a> making changes and doing this with my html, css and javascript but it didnt work out.</p>
  
  <p>My HTML CODE :</p>
  
  <pre><code> &lt;div class="content"&gt;
          &lt;div class="article"&gt;
              &lt;h2&gt;The Most Popular Leg Workout for Women&lt;/h2&gt;
              &lt;img src="img/leg-workout.jpg"&gt;
              &lt;div class="article-text"&gt;
                  &lt;p&gt;Far far away, &lt;strong&gt; behind the word mountains &lt;/strong&gt;, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth..
                  Far far away, &lt;strong&gt; behind the word mountains &lt;/strong&gt;, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth..&lt;/p&gt; 
                  &lt;blockquote&gt;"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates&lt;/blockquote&gt;                  
                  &lt;div class="fade"&gt;&lt;/div&gt;
                  &lt;button class="btn read-more" type="button"&gt;Read More&lt;/button&gt;          
              &lt;/div&gt;      
          &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.article {
      width: 80% ;
      margin: 5% auto;
      margin-top: 0;
      height: 300px;
  }
  
  h2 {
      color: #4d4d4d;
  }
  
  .article img {
      width: 40%;
      height: auto;
      float:left;
      padding: 10px 20px;
      padding-left: 0;
  
  }
  
  .article-text {
      text-align: justify;
      max-height: 125px;
      position: relative;
      overflow: hidden;
  }
  
  .article .read-more { 
      position: absolute; 
      text-align: center; 
      margin: 0; 
      padding: 10px 10px; 
      bottom: 50px;
      left: 260px;
  }
  
  .fade {
      background: linear-gradient( rgba(255,0,0,0), white);
      height: 120px;
      position: relative;
      opacity: 1!important;
      top: -260px;
  }
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code>function fadeOutOnClick() {
      $(function() {
          $('.read-more').click( function (){
              $('.fade').toggleClass('fade-on','fade-off');
          });
      });
  }
  
      window.addEventListener("DOMContentLoaded", function() {
          fadeOutOnClick();
      });      
  </code></pre>
  
  <p>Codepen of my work : <a href="https://codepen.io/anamolshres55/pen/bKXEoO" rel="nofollow noreferrer">https://codepen.io/anamolshres55/pen/bKXEoO</a></p>