jQuery：单击时更改链接文本和图标

Question

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", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse">
    <i class="material-icons" 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?

Answer 1

 $(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"); } }); });

 <link href="https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@6.7.0/dist/material-design-icons.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#collapse" , class="btn" , role="button" , data-bs-toggle="collapse" id="btn-collapse"> <i class="material-icons" style="vertical-align: middle;">expand_more</i> <label style="vertical-align: middle;">PRIMARY TEXT</label> </a>