How to slide up and down the extra text in jQuery?

Question

How to slide up and down when there are many lines of text?

<div class="col-md-4">
<p class="h1 text-center">
    My Title
</p>
<p class="text-justify">
    my text my text my text my text my text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
</p>
<p align="center">
    <a href="#"><img class="img-responsive" width="150" height="150" src="assets/images/products/readmorebtn.png" />
    </a>
</p>

How do I hide half of the content when there are many lines, and create a "read more" button, that on click displays the full hidden content, and has a slider?

Answer 1

Here is the correct method to do this:-

  $(function(){ $("#moreText").on("click",function(){ $("#toggleP").toggleClass("show"); }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .show{display: inline !important;} </style> <div class="col-md-4"> <p class="h1 text-center"> My Title </p> <p class="text-justify"> <span> my text my text my text my text my text my text </span> <span id="toggleP" style="display: none;"> my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text </span> </p> <p align="center"> <a href="#" id="moreText">more text </a> </p> 

Answer 2

Below code helps you achieve it, you have to add your text in a div:

  $(document).ready(function() { $('#hidden-xs').html($('#hidden-xs').next().next().next('.hidden-xs').html()); $('#dvReadmore').click(function(){ $(this).hide(0); $('#hidden-xs').animate({height: '100%'}); $('#dvShowless').show(); }); $('#dvShowless').click(function(){ $(this).hide(0); $('#hidden-xs').animate({height: '3em'}); $('#dvReadmore').show(); }); }); 

 #hidden-xs { line-height: 1.5em; height: 3em; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="col-lg-12 clearfix"> <div id="hidden-xs"> TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data </div> <div class="readmorehxs" id="dvReadmore"><b>Read more..</b></div> <div class="readmorehxs" id="dvShowless" style="display:none;text-align:right;"><b>..Show less</b></div> </div>