Bootstrap 3 Collapse muestra el estado con el icono de Chevron

Utilizando el ejemplo básico extraído de la página de ejemplos de Javascript de Bootstrap 3 para Colapso , he podido mostrar el estado de colapso usando íconos de chevron.

Tengo esto trabajando usando:

$('#accordion .accordion-toggle').click(function (e) { var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); }); 

Esto funciona (no se ha probado completamente en todos los navegadores), pero me pregunto si hay una solución más elegante para esto.

Idealmente, me gustaría utilizar la función central, pero no estoy seguro de cómo lograr los mismos resultados con ella.

 $('#accordion').on('hidden.bs.collapse', function () { //do something... }) 

Aquí hay una versión funcional en jsfiddle .

Para el siguiente HTML (de ejemplos de Bootstrap 3 ):

 .panel-heading .accordion-toggle:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ content: "\e114"; /* adjust as needed, taken from bootstrap.css */ float: right; /* adjust as needed */ color: grey; /* adjust as needed */ } .panel-heading .accordion-toggle.collapsed:after { /* symbol for "collapsed" panels */ content: "\e080"; /* adjust as needed, taken from bootstrap.css */ } 
    
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Podría usar este tipo de código:

 function toggleChevron(e) { $(e.target) .prev('.panel-heading') .find('i.indicator') .toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron); 

=> Working JsFiddle

Para mejorar la respuesta con la mayoría de los upticks, algunos de ustedes pueden haber notado en la carga inicial de la página que todos los galones apuntan en la misma dirección. Esto se corrige al agregar la clase “contraída” a los elementos que desea cargar colapsados.

 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Aquí hay un violín funcional: http://jsfiddle.net/3gYa3/585/

Gracias a biggates y steakpi. Como respuesta a la pregunta de Dreamonic, hice algunos pequeños cambios para hacer que todos los encabezados se puedan hacer clic (no solo la cadena del título y los gluphs) y quité el subrayado del enlace. Para forzar que aparezcan icons en la misma línea, agregué h4 al final de las instrucciones de CSS. Aquí está el código modificado:

 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Y el CSS modificado:

 .panel-heading .accordion-toggle h4:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; color: grey; overflow: no-display; } .panel-heading .accordion-toggle.collapsed h4:after { /* symbol for "collapsed" panels */ content: "\e080"; } a.accordion-toggle{ text-decoration: none; } 

Mejora en la respuesta de Bludream:

¡Definitivamente puedes usar FontAwesome!

Asegúrese de incluir “colapsado” junto con la clase “encabezado del panel”. La clase “contraída” no se incluye hasta que haga clic en el panel, por lo que desea incluir la clase “contraída” para mostrar el cheurón correcto (es decir, chevron-right se muestra cuando se contrae y chevron-down cuando está abierto).

HTML

 

Lorem ipsum...

CSS

 .panel-heading .chevron:after { content: "\f078"; } .panel-heading.collapsed .chevron:after { content: "\f054"; } 

Además, es una buena práctica crear una nueva clase en lugar de usar una clase existente.

Ver Codepen por ejemplo: http://codepen.io/anon/pen/PPxOJX

Aquí hay un par de clases de CSS puro que te permiten manejar cualquier tipo de contenido de alternar directamente en tu html.

Funciona con cualquier elemento que necesite cambiar. Cualquiera que sea su diseño, simplemente lo coloca dentro de un par de elementos con las clases .if-collapsed y .if-not-collapsed dentro del elemento de alternar.

La única pega es que debes asegurarte de poner el estado inicial deseado de alternar. Si está cerrado inicialmente, coloca una clase contraída en el alternar.

También requiere el selector : no , no funciona en IE8.

Ejemplo HTML:

  
...

Menos versión:

 [data-toggle="collapse"] { &.collapsed .if-not-collapsed { display: none; } &:not(.collapsed) .if-collapsed { display: none; } } 

Versión CSS:

 [data-toggle="collapse"].collapsed .if-not-collapsed { display: none; } [data-toggle="collapse"]:not(.collapsed) .if-collapsed { display: none; } 

ejemplo simple de trabajo

  • obtener la condición del cuerpo que se muestra / esconder
  • llegar a su padre att
  • obtener icono de buscar
  • cambiar el ícono

ingrese simple

HTML :

  
Jai
body content 1
body content 2
body content 3

JavaScript

 $('div.accordion-body').on('shown', function () { $(this).parent("div").find(".icon-chevron-down") .removeClass("icon-chevron-down").addClass("icon-chevron-up"); }); $('div.accordion-body').on('hidden', function () { $(this).parent("div").find(".icon-chevron-up") .removeClass("icon-chevron-up").addClass("icon-chevron-down"); }); 

o … simplemente puedes poner un estilo como este.

 .panel-title a.collapsed { background: url(../img/arrow_right.png) center right no-repeat; } .panel-title a { background: url(../img/arrow_down.png) center right no-repeat; } 

http://codepen.io/anon/pen/GJjrQN

¡Estoy usando fonts increíbles ! y quería un panel para ser plegable

  
products
....

y el CSS

 .panel-heading .fa-chevron:after { content: "\f078"; } .panel-heading.collapsed .fa-chevron:after { content: "\f054"; } 

enter image description here

enter image description here

Angular parece causar problemas con los enfoques basados ​​en JavaScript aquí (al menos los que he probado). Encontré esta solución aquí: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . La esencia de esto es usar data-ng-click en el botón de alternar y hacer el método para cambiar el botón en el controlador usando el contexto $scope .

Supongo que podría proporcionar más detalles … mis botones están configurados en el glyphicon del estado inicial del div que colapsan (glyphicon-chevron-right == collateded div).

page.html:

 
...

controllers.js:

 .controller('PageController', function($scope, $rootScope) { $scope.collapse = function (event) { $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); }; ) 

Si está tratando de usar esto solo con paneles (no de acuerdo), pruebe este código:

 
Panel content

Un trazador de líneas.

 i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); } 

En este ejemplo, se está utilizando para agrupar filas de tablas plegables. Lo único que debe hacer es agregar el nombre de la clase de destino (my-collapse-name) a su icono:

   Master Row - Title    Detail Row - Content  

Puede lograr lo mismo con la clase de intercalación nativa de Bootstrap utilizando span.caret.collapse.in { transform: rotate(90deg); } y span.caret.collapse.in { transform: rotate(90deg); } span.caret.collapse.in { transform: rotate(90deg); }

Sé que esto es antiguo, pero como ahora es 2018, pensé que respondería haciéndolo mejor simplificando el código y mejorando la experiencia del usuario haciendo que el chevron gire en función del colapso o no. Estoy usando FontAwesome sin embargo. Aquí está el CSS:

 a[data-toggle="collapse"] .rotate { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } a[data-toggle="collapse"].collapsed .rotate { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 

Aquí está el HTML para la sección del panel:

  
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Utilizo bootstraps para tirar del chevron hacia la derecha del encabezado del panel, que debe ser de ancho completo y receptivo. El CSS realiza todo el trabajo de animación y gira el chevron en función de si el panel está contraído o no. Sencillo.

Quería un enfoque html puro, ya que quería colapsar y expandir html que se agregó sobre la marcha a través de una plantilla. Se me ocurrió esto …

https://jsfiddle.net/3mguht2y/1/

 var noJavascript = ":)"; 

Que podría ser útil para alguien 🙂