William William - 1 year ago 120
Javascript Question

jQuery - Read More / Read Less. How to replace text?


<a href="#" class="show_hide" data-content="toggle-text">Read More</a>


// Slide Up Slide Down
$(this).text().replace("Read More", "Read Less");
$('.' + $(this).attr('data-content')).slideDown();

$(this).text().replace("Read Less", "
$('.' + $(this).attr('data-content')).slideUp();

I am trying to make one of those "Read More / Read Less" buttons to hide and show text.

How do I replace "Read More" with "Read Less" on click?

Your input is much appreciated!

Answer Source

You could also use :visible to check if content is visible and change text accordingly.

$(document).ready(function () {
    $(".show_hide").on("click", function () {
        var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';

JSFiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download