Utilizando el ejemplo central tomado de la página de ejemplos Javascript Bootstrap 3 para Colapso , he podido mostrar el estado del 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 usar la función principal, 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 que funciona en jsfiddle .
jquery
css
twitter-bootstrap
twitter-bootstrap-3
Ryan Scott
fuente
fuente
Respuestas:
Para el siguiente HTML (de ejemplos de Bootstrap 3 ):
Efecto visual:
fuente
Podrías usar este tipo de código:
=> JsFiddle de trabajo
fuente
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);en su lugarPara mejorar la respuesta con la mayor cantidad de subidas, 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 agregando la clase "contraída" a los elementos que desea cargar contraída.
Aquí hay un violín que funciona: http://jsfiddle.net/3gYa3/585/
fuente
Mejora en la respuesta de Bludream:
¡Definitivamente puedes usar FontAwesome!
Asegúrese de incluir "colapsado" junto con la clase "encabezado de panel". La clase "colapsada" no se incluye hasta que hace clic en el panel, por lo que desea incluir la clase "colapsada" para mostrar el cheurón correcto (es decir, chevron-right se muestra cuando está colapsado y chevron-down cuando está abierto).
HTML
CSS
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
fuente
Gracias a biggates y steakpi. Como respuesta a la pregunta Dreamonic, hice algunos pequeños cambios para hacer clic en todos los encabezados (no solo la cadena de título y gluphs) y quité el subrayado del enlace. Para forzar que aparezcan iconos en la misma línea, agregué h4 al final de las instrucciones CSS. Aquí está el código modificado:
Y el CSS modificado:
fuente
Aquí hay un par de clases de ayuda CSS puro que le permiten manejar cualquier tipo de contenido de alternar directamente en su html.
Funciona con cualquier elemento que necesite cambiar. Cualquiera sea su diseño, simplemente póngalo dentro de un par de elementos con las clases .if-collapsed y .if-not-collapsed dentro del elemento de alternancia.
El único inconveniente es que debe asegurarse de colocar el estado inicial deseado de la palanca. Si inicialmente está cerrado, coloque un colapso clase en la palanca.
También requiere : no selector, no funciona en IE8.
Ejemplo HTML:
Menos versión:
Versión CSS:
fuente
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 al hacer que el chevron gire en función de colapsado o no. Sin embargo, estoy usando FontAwesome. Aquí está el CSS:
Aquí está el HTML para la sección del panel:
Utilizo bootstraps pull-right para tirar del galón hasta la derecha del encabezado del panel, que debe ser de ancho completo y sensible. El CSS hace todo el trabajo de animación y gira el galón en función de si el panel está colapsado o no. Sencillo.
fuente
ejemplo simple de trabajo
ingrese simple
HTML :
JavaScript
fuente
o ... puedes poner un estilo como este.
http://codepen.io/anon/pen/GJjrQN
fuente
Estoy usando una fuente increíble ! y quería que un panel fuera plegable
y el css
fuente
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-clickel botón de alternar y hacer el método para cambiar el botón en el controlador usando el$scopecontexto.Supongo que podría proporcionar más detalles ... mis botones están configurados en el glifo del estado inicial del div que colapsan (glyphicon-chevron-right == div colapsado).
page.html:
controllers.js:
fuente
Un trazador de líneas.
En este ejemplo, se está utilizando para agrupar filas de tabla plegables. Lo único que debe hacer es agregar el nombre de la clase de destino (my-collapse-name) a su icono:
Puede lograr lo mismo con la clase de cuidado nativo de Bootstrap usando
<span class='caret my-collapse-name'></span>yspan.caret.collapse.in { transform: rotate(90deg); }fuente
Si está intentando usar esto solo con paneles (no acordeón), intente este código:
fuente
¡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/
Lo que podría ser útil para alguien :)
fuente