jQuery: change link text and icon on click-CodePudding

So I am trying to change the the icon of my link for collapse section alongside with the text of the link.

Here is my code:

<a href="#collapse", , role="button", data-bs-toggle="collapse" id="btn-collapse">
    <i  style="vertical-align: middle;">expand_more</i>
    <label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>

<!--CONTENT-->

<script>
    $(document).ready(function(){
        $('#btn-collapse').on('click', function () {
            var text=$('#btn-collapse').text();
            if(text === "SECONDARY TEXT"){
                $(this).text('PRIMARY TEXT');
                $(this).find("i").html("expand_more");
            } else{
                $(this).text('SECONDARY TEXT');
                $(this).find("i").html("expand_less");
            }
        });
    });
</script>

I've been trying to find a solution for this for a while now, but nothing seems to work.. Text changes fine, but the icon completely vanishes on click. I don't think it is a major issue, but there is something I don't get with this. Any help here how to adjust?

CodePudding user response：

$(document).ready(function(){
  $('#btn-collapse').on('click', function () {
    var thisElement = $(this);
    var anchorLabelElement = thisElement.find('label');
    if(anchorLabelElement.text() === "SECONDARY TEXT"){
      anchorLabelElement.text('PRIMARY TEXT');
      thisElement.find("i").text('expand_more');
    } else {
      anchorLabelElement.text('SECONDARY TEXT');
      thisElement.find("i").text("expand_less");
    }
  });
});