JSFiddle - React, Tailwind, and code Playground

by Przmak

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div class="box">
<span class="one">
Thexxxx1815i extends support to a new generation of Wi-Fi clients, such as smartphones, tablets, and high-performance laptops that have integrated 802.11ac Wave 1 or Wave 2 support.It enables a total aggregate dual-radio data rate of up to 1 Gbps. Thexxxx1815i extends support to a new generation of Wi-Fi clients, such as smartphones, tablets
</span>
<span class="action readMore">
  ... Read More
</span>
<span class="two hide">
   and high-performance laptops that have integrated 802.11ac Wave 1 or Wave 2 support.It enables a total aggregate dual-radio data rate of up to 1 Gbps.Thexxxx1815i extends support to a new generation of Wi-Fi clients, such as smartphones, tablets, and high-performance laptops that have integrated 802.11ac Wave 1 or Wave 2 support.It enables a total aggregate dual-radio data rate of up to 1 Gbps.Thexxxx1815i extends support to a new generation of Wi-Fi clients, such as smartphones, tablets, and high-performance laptops that have integrated 802.11ac Wave 1 or Wave 2 support.It enables a total aggregate dual-radio data rate of up to 1 Gbps.
</span>
<span class="action readLess" style="display:none">
  Read Less
</p>

</div>
</body>

CSS

.addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;
    }

    .addReadMore.showmorecontent .readMore {
        display: none;
    }

    .addReadMore .readMore,
    .addReadMore .readLess {
        font-weight: bold;
        margin-left: 2px;
        color: blue;
        cursor: pointer;
    }

    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
        display: block;
    }
    body{
      background: #000;
      padding:40px;
    }
    p,span{
      color: #FFF;
    }
    .box{
      width: 300px;
    }
    .two.hide{
      display:none;
    }
    .readLess,.readMore{
      color:blue;
      cursor:pointer;
    }
    .box{
      width: 200px;
    }

JavaScript

//Read More and Read Less Click Event binding

jQuery(document).on("click", ".action", function() {	  
  jQuery(".two").toggleClass("hide",1,function(){
    if(jQuery(".two").hasClass("hide")){
      jQuery(".readMore").show(1);
      jQuery(".readLess").hide(1);      
      jQuery(".two").hide("blind",10);  
    }else{
    	jQuery(".readMore").hide(1);
      jQuery(".readLess").show(1);
      jQuery(".two").show("blind",10);  
    }
  });
});