how to text fade out on click function?

Question

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 https://css-tricks.com/text-fade-read-more/ making changes and doing this with my html, css and javascript but it didnt work out.

My HTML CODE :

 <div class="content">
        <div class="article">
            <h2>The Most Popular Leg Workout for Women</h2>
            <img src="img/leg-workout.jpg">
            <div class="article-text">
                <p>Far far away, <strong> behind the word mountains </strong>, 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, <strong> behind the word mountains </strong>, 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..</p> 
                <blockquote>"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates</blockquote>                  
                <div class="fade"></div>
                <button class="btn read-more" type="button">Read More</button>          
            </div>      
        </div>
   </div>

CSS :

.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;
}

Javascript :

function fadeOutOnClick() {
    $(function() {
        $('.read-more').click( function (){
            $('.fade').toggleClass('fade-on','fade-off');
        });
    });
}

    window.addEventListener("DOMContentLoaded", function() {
        fadeOutOnClick();
    });      

Codepen of my work : https://codepen.io/anamolshres55/pen/bKXEoO

Answer 1

How about a more simple version?

Edit max-height of .article-text to change the size of previewed text.

 $('.btn.read-more').click( function() { $(this).siblings('.article-text').addClass('visible'); $(this).siblings('.btn.read-less').show(); $(this).hide(); } ); $('.btn.read-less').click( function() { $(this).siblings('.article-text').removeClass('visible'); $(this).siblings('.btn.read-more').show(); $(this).hide(); } ); 

 .article-text { display: block; max-height: 80px; position: relative; overflow: hidden; transition: max-height 1.5s; } .btn.read-less { display: none; } .article-text::before { content: ""; display: block; position: absolute; bottom: 0px; width: 100%; height: 20px; margin-top: 20px; background: linear-gradient(to bottom, transparent, white); } .article-text.visible { max-height: 500px; } .article-text.visible::before { /* display: none; */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="article"> <!-- <h2>The Most Popular Leg Workout for Women</h2> --> <!-- <img src="https://via.placeholder.com/300x30"> --> <div class="article-text"> <p>Some Text</p> <p>Far far away, <strong> behind the word mountains </strong>, 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.</p> <p>Far far away, <strong> behind the word mountains </strong>, 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.</p> <blockquote class="read-more-text">"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates</blockquote> </div> <button class="btn read-more" type="button">Read More...</button> <button class="btn read-less" type="button">Read Less...</button> </div> </div> 

Edit added with text-preview

Edit added read-less (not perfect but working)

Answer 2

jQuery's .fadeOut() method relies on the display property of CSS. To get it to work on a hidden element, the element itself must be hidden via adding display:none; to it's CSS. Since you mentioned you used max-height to hide it i think that is your problem. Alternatively, you can call .hide() method at the start of your script to hide your element first, rather than doing it via CSS at all.

Answer 3

Your needs are different from the link you specified. Your script can be much simpler, something like the following:

$(document).ready(function() {
    $("button.read-more").on("click", function() {
        // get the closest article-text div that holds the "read more" button
        var articleDiv = $(this).closest("div.article-text");

        // calculate the total height on ALL elements inside it except for your fade overlay div
        var totalHeight = 0;
        articleDiv.find("*:not('div.fade')").each(function() {
            totalHeight += $(this).outerHeight();
        });

        // fade out the button
        $(this).fadeOut();

        // fade out the fade div overlay
        articleDiv.find("div.fade").fadeOut();

        // animate max-height to the height of all the stuff inside the article
        articleDiv.animate({"max-height": totalHeight});
        return false;
    });
});

I added a code pen. I haven't got an account there so I don't know how long it stays up. Here's the link .

EDIT

Your updated version's code pen is incomplete. Just the same, to help you with the this keyword, you can try the following.

$(document).ready(function() {
  $(".read-more").on("click", function() {
    $(this).closest(".fade").toggleClass("fade-on", "fade-off");
    $(this).closest(".article-text").css("max-height", "none");
  });
});

The this keyword refers to (in this case) the ".read-more" that was clicked. For reference, your original JavaScript in the code pen was

function fadeOutOnClick() {
    $(function() {
        $('.read-more').click( function (){
            $('.fade').toggleClass('fade-on','fade-off');
            $('.article-text').css('max-height','none');
        });
    });
}

window.addEventListener("DOMContentLoaded", function() {
    fadeOutOnClick();
});      

Answer 4

The reason your code didn't run was because you forgot to include

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

However jquery will only work some sort of web server, meaning you cant just run it on your local folder and view the html in your browser. You can use something like Wamp.

CSS

<style>
.article {
    width: 80% ;
    margin: 5% auto;
    margin-top: 0;
    height: 300px;
}

h2 {
    color: #4d4d4d;
}

p {
    margin: 0 0 15px 0;
}

.article img {
    width: 40%;
    height: auto;
    float:left;
    padding: 10px 20px;
    padding-left: 0;

}

.article-text {
    text-align: justify;
    height: 125px;
    position: relative;
    overflow: hidden;
}

.article .read-more { 
    position: absolute; 
    text-align: center;  
    bottom: 0px;
    width:100%;
    text-align:center;
    padding-bottom:20px;
    background: linear-gradient( rgba(255,0,0,0), white);
}

.read-more .btn{
    padding: 10px 10px; 
}

Your HTML slightly modified

<div class="content">
    <div class="article">
        <h2>The Most Popular Leg Workout for Women</h2>
        <img src="img/leg-workout.jpg">
        <div class="article-text">
            <div class="article-body">
            <p>Far far away, <strong> behind the word mountains </strong>, 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, <strong> behind the word mountains </strong>, 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..</p> 
            <blockquote>"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates</blockquote>                  
            </div>

            <div class="read-more">
            <button class="btn" type="button">Read More</button>        
            </div>
        </div>      
    </div>

Javascript/jquery Much simpler solution

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 <script>

$(function() {


    totalHeight = 0;
    $(".article-text .read-more").click(function() {


            totalHeight = $(".article-body").outerHeight();

        $( ".article-text" ).animate({
        height: totalHeight
      }, 200, function() {
        // Animation complete.
      });

        $(this).fadeOut();
        $(".fade").fadeOut();

    });
});