A menudo uso un ícono de intercalación para mostrar si un colapso en Bootstrap 5 está abierto o cerrado.

Por ejemplo, tendré un html como este:

 <h4 class="border" role="button" data-bs-toggle="collapse" href="#plinks"> <i id="plinks-closed" class="fa fa-caret-right"></i> <i id="plinks-open" style="display:none;" class="fa fa-caret-down"></i> Plinks </h4>

y algunos js como este para cambiar el ícono de intercalación cuando se abre o cierra el colapso:

 $('#plinks').on('show.bs.collapse', function () { $( "#plinks-closed").hide(); $( "#plinks-open").show(); }); $('#plinks').on('hide.bs.collapse', function () { $( "#plinks-closed").show(); $( "#plinks-open").hide(); });

A veces tengo muchos de estos y uso muchos ID diferentes y secciones js para que funcionen, y todas esas secciones js para cada ID parecen un poco desordenadas e ineficientes.

Lo que estoy buscando es una forma más universal, no específica de identificación, de tomar el cursor derecho e intercambiarlo por el cursor izquierdo en un elemento que asigno .caret-collapse. Rellenaría automáticamente el "intervalo de intercalación cerrado" al cargar y luego lo cambiaría automáticamente por el "intervalo de intercalación abierto" cuando se abra el colapso.

Me imagino que el html se vería así:

 <h4 class="border caret-collapse" role="button" data-bs-toggle="collapse" href="#plinks"> <span class="caret-collapse-container"></span> Plinks </h4>

En cuanto al js, supongo que verificaría el clic en .caret_collapse y luego haría algún tipo de búsqueda "secundaria" para el contenedor .caret-collapse y agregaría/eliminaría el código del icono, pero he tenido No tuve suerte haciendo que algo así sucediera y pensé en preguntar aquí en lugar de frustrarme más.