Change button / text on button after read less-CodePudding

READ MORE / READ LESS jQuery which I implemented on my HTML Bootstrap page, works BUT as a happy amateur I would like to change my blue text "Read More" to Black, after and if I read more. The page has many Read More sections.

// This function will handle hidden and read more events
$(document).on("click", ".toggle-text-button", function() {
  if ($(this).text() == "Read More") {
    var thisNow = document.getElementById('toggle-text-button')
    console.log("this is now =", thisNow);
    $(this).text("Read Less");
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-"   $(this).attr("toggle-text")).slideDown();
  } else {
    $(this).text("Read More");
    //   $(this).addClass("r-Less");
    // Use a jquery selector using the `.attr()` of the link
    console.log("SLIDE UP -- this is now =", $(this).attr("toggle-text"));
    var BackToo = ("#"   "toggle-text-"   $(this).attr("toggle-text")   "b");
    var BackCol = ("#"   "toggle-text-"   $(this).attr("toggle-text"));
    // offset = $(BackToo).offset().top - document.getElementById(BackToo).clientHeight;
    console.log("JUMP BACK =", BackToo)
    // $(".r-More").css("color", "black!important");
    //  $(this).css("color" , "black!important");
    $("#toggle-text-"   $(this).attr("toggle-text")).slideUp();
    // $(this).addClass("r-Less");
    //document.getElementById(BackToo).scrollIntoView();
    //  $(BackToo)[0].scrollIntoView();
    //   $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow');
    $("html, body").delay(1000).animate({
      scrollTop: $(BackToo).offset().top - 150
    }, 1000);
    // $(this).attr("toggle-text").css("color","blacl!important");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a class="toggle-text-button item-link r-More" toggle-text="10">Read More<i class="fa fa-arrow-right"></i></a>

CodePudding user response：

No need to script that

You can give the a an href and use :visited css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<link rel="stylesheet" href="https://www.inspirothemes.com/polo/css/style.css" />

<style>
a.r-More:visited { color: black; }
</style>

<a href="#" class="toggle-text-button item-link r-More" toggle-text="10">Read More<i class="fa fa-arrow-right"></i></a>

CodePudding user response：

Why are you changing css of class .r-More? Doing it, you are going to change all buttons.

Try remove this:

$(".r-More").css("color", "black!important");

And add just:

$(this).css("color" , "#000"); // avoid to use !important

Now, you have to back to the original color (blue, maybe), when the user clicks at "Read Less":

$(this).css("color" , "blue");

If you want to change others css parameters, I suggest you use some class, like ".readMoreClass". Then, you just have to use:

$(this).addClass(".readMoreClass") // to add class
$(this).removeClass(".readMoreClass") // to remove class

Hope have help you!