readmore using jquery

implementing readmore and readless feature using jquery.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
    
        <title>Minor Project</title>
    </head>
    <body>
        
       
    <div class="outer-block"> 
        
        <h1>Student Life</h1>

        
        <p class="para">
        Student life is the happiest period in the life of a person. It is a life, free from all anxieties of the tough world. The mind of the student is full of noble ideas and his eyes are full of dreams.

        <a class="read-more-show hide" href="#">Read More</a> <span class="read-more-content">   
        Student life is the most crucial period in the life of a person. Although there are no worldly cares to worry about the time, the period is very important for the student himself, for he has to be up and doing in the acquisition of knowledge in the formation of his character and in making contact with the world about him. The impressions he will gather at this period will determine his future conduct. The taste he will develop in student life will influence his behaviour towards other people throughout his future career. It is therefore necessary that a right and proper use of the period is made with the utmost care.
        <a class="read-more-hide hide" href="#">Read Less</a></span>
        </p>
        
        </div>
    </body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    background-color: #e5eff7;
    background-size: cover;
    background-position: center;
    font-family: Lato;
    font-weight: 300;
    position: relative;
    height: 80vh;
    color: #555;
}

.outer-block {
    width: 655px;
    position: absolute;
    top: 10%;
    left:28%;
    transform: translateX(-50%,-50%);
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #efefef;
    border-bottom: 1px solid #e2e2e2;
    display: none;
    
}


h1{
    text-align: center;
}


p{
    padding: 40px;
    font-size: 20px;
    text-align: justify;
}

.hide {
  display: none;
}

JavaScript

$(function(){
    $(".outer-block").fadeIn(2000);    
});


$(".read-more-content").addClass("hide");
$('.read-more-show, .read-more-hide').removeClass('hide');

$(".read-more-show").on('click',function(){
    $(".read-more-content").removeClass("hide");
    $('.read-more-show').addClass('hide');
    $('.read-more-hide').removeClass('hide');
});

$(".read-more-hide").on('click',function(){
    $(".read-more-content").addClass("hide");
    $('.read-more-show').removeClass('hide');
    $('.read-more-hide').addClass('hide');
});