Así que estoy tratando de cambiar el ícono de mi enlace para colapsar la sección junto con el texto del enlace.

Aquí está mi código:

 <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>

He estado tratando de encontrar una solución para esto por un tiempo, pero nada parece funcionar. El texto cambia bien, pero el ícono desaparece por completo al hacer clic. No creo que sea un problema importante, pero hay algo que no entiendo con esto. ¿Alguna ayuda aquí sobre cómo ajustar?