Bootstrap "read more" button - how to collapse and change button text with no time difference?

Question

I have a layout created with bootstrap and there is this “read more” button that expands text. When text is expanded it changes to “show less”. My problem is that when user clicks to “show less” button, button-text firstly changes back to “read more” and only THEN text(paragraph) is collapsed. And this time difference is noticeable. But is there a way to make button change its text after the text is collapsed or somehow make this time difference less noticeable?

In my js file there’s only code for button text changing, and text toggling is entirely on bootstrap, maybe I shouldn’t use bootstrap for this particular button?

Note that my problem is not about changing button text from “read more” to “show less” itself, I know there’s a lot of solutions around.

Markup for "read more" button:

<p>Initial text 
  <span id="moreText" class="collapse">more text here...</span>
  <a id="readMore" data-toggle="collapse" href="#moreText">
    Read More
  </a> 
</p>

JS for button:

$(function() {
    $('#readMore').click(function() { 
     $(this).text(function(i,def) {
        return def=='Read More' ?  'Show Less' : 'Read More';
    });
})

});

Answer 1

I had the same problem, I solved it through a little of css and Bootstrap 4

#summary {
  font-size: 14px;
  line-height: 1.5;
}

#summary p.collapse:not(.show) {
    height: 42px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#summary p.collapsing {
    min-height: 42px !important;
}

#summary a.collapsed:after  {
    content: '+ Read More';
}

#summary a:not(.collapsed):after {
    content: '- Read Less';
}

Here example -> Read Less - Bootstrap 4