Bootstrap 3 colapsa cambiar el icono de chevron al hacer clic

Posterior a de una larga recopilación de datos resolvimos esta aprieto que suelen tener ciertos lectores. Te dejamos la respuesta y nuestro deseo es resultarte de gran apoyo.

Solución:

CSS puro.

parte HTML:

   
        Open/Close collapse
        
        
    

los key el elemento aquí es aria-expanded=”false” o “true”

CSS:

a[aria-expanded=true] .fa-chevron-right 
   display: none;

a[aria-expanded=false] .fa-chevron-down 
   display: none;

El problema es que su código jQuery no es correcto.

Está cerrando la función del controlador de eventos al principio de esta línea:

$('#serviceList').on('shown.bs.collapse'), function() {

¿Ves ese segundo paréntesis de cierre? Eso es cerrar la función ‘on’ antes de tiempo. Intenta cambiar tu jQuery para que se vea así:

$('#serviceList').on('shown.bs.collapse', function() 
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  );

$('#serviceList').on('hidden.bs.collapse', function() 
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  );

Pruebe esta solución más elegante:

$('#serviceList').click(function()
    $(this).find('.servicedrop').toggleClass('icon-chevron-down icon-chevron-up');
);

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador