javascript - descargar - Agregar icono abierto/cerrado a Twitter Bootstrap collapsibles(acordeones)
bootstrap js (17)
Configuré esta versión simple del accordion Bootstrap:
Acordeón simple: http://jsfiddle.net/darrenc/cngPS/
Actualmente, el ícono solo apunta hacia abajo , pero ¿alguien sabe qué se necesitaría para implementar JS a fin de cambiar la clase del ícono a:
<i class="icon-chevron-up"></i>
... para que apunte cuando se expande y vuelve a pasar de nuevo hacia abajo cuando se colapsó, ¿y cuarto?
@RobSadler:
RE Martin Wickman''s CSS only version ...
Puede solucionar el problema colocando accordion-caret en la etiqueta delimitadora y asignándole una clase contraída de forma predeterminada. Al igual que:
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
Eso funcionó para mí.
Aquí está la respuesta para aquellos que buscan una solución en Bootstrap 3 (como yo).
La parte HTML:
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
La parte js:
$(''.collapse'').on(''shown.bs.collapse'', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on(''hidden.bs.collapse'', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
Ejemplo de acordeón:
Aquí está mi enfoque para Bootstrap 2.x. Es solo un poco de CSS. No se necesita JavaScript
.accordion-caret .accordion-toggle:hover {
text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong {
text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
font-size: 25px;
vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content: "▾";
margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content: "▸";
margin-right: 0px;
}
Simplemente agregue la clase accordion-caret al div grupo de acordeón, así:
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
Aquí está mi solución, que se refina a partir de una publicada por @ john-magnolia y resuelve algunos de sus problemas
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles() {
$(''.collapse'').on(''show'', function() {
var $t = $(this);
var header = $("a[href=''#" + $t.attr("id") + "'']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
}).on(''hide'', function(){
var $t = $(this);
var header = $("a[href=''#" + $t.attr("id") + "'']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
});
}
Y aquí está el ejemplo de marcado:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
Así es como lo hago sin ningún js.
Utilicé el icono glyphicon-triangle-right pero funciona con cualquier otro icono, lo que hace es aplicar una rotación de 90 grados al icono cuando el panel está abierto o no. Estoy usando Bootstrap 3.3.5 para este.
Código CSS
h4.panel-title a {
display: block;
}
h4.panel-title a.collapsed .glyphicon-triangle-right {
color: #ada9a9 !important;
transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
color: #515e64 !important;
transform: rotate(90deg);
}
Esta es la estructura HTML tomada del ejemplo de Bootstrap
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
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.
</div>
</div>
</div>
</div>
Creo que los mejores códigos son estos:
$(''#accordion1'').collapse({
toggle: false
}).on(''show'',function (e) {
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
}).on(''hide'', function (e) {
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
El colapso de Bootstrap tiene algunos eventos a los que puedes reaccionar:
$(document).ready(function(){
$(''#accordProfile'').on(''shown'', function () {
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$(''#accordProfile'').on(''hidden'', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});
Esto ha sido respondido de varias maneras, pero lo que se me ocurrió fue lo más simple y fácil para mí con Bootstrap 3 y fuente impresionante. Lo acabo de hacer
$(''a.toggler'').on(''click'', function () {$(''i'', this).toggleClass(''fa-caret-up'');});
Esto solo cambia la clase de CSS del icono que quiero mostrar. Agrego el toggler de clase al elemento al que quiero aplicar esto. Esto se puede agregar a cualquier elemento que desee alternar un icono.
La solución CSS más legible probablemente sea usar el atributo aria-expanded. Recuerda que necesitarás agregar aria-expanded = "false" a todos los elementos de colapso ya que esto no está configurado en la carga (solo en el primer clic).
El HTML:
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
El CSS:
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
display: none;
}
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
display: inline;
}
Funciona con Bootstrap 3.x.
Ninguno de los anteriores funcionó para mí, pero se me ocurrió esto y funcionó:
function toggleChevron(el) {
if ($(el).find(''i'').hasClass(''icon-chevron-left''))
$(el).find(''.icon-chevron-left'').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find(''.icon-chevron-down'').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}
Implementación de HTML:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
Otra solución no javascript que usa la funcionalidad de colapso en sí:
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
display: inline; }
.expand-icon.collapsing {
display: none; }
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
Para Bootstrup 3.2 + FontAwesome
$(document).ready(function(){
$(''#accordProfile'').on(''shown.bs.collapse'', function () {
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$(''#accordProfile'').on(''hidden.bs.collapse'', function () {
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
A veces tienes que escribir así. Si es así
$(''.collapsed span'').removeClass(''fa-minus'').addClass(''fa-plus'');
Generado automáticamente (clase = "colapsado"), cuando presiona el menú ocultar.
ps cuando necesitas crear un menú de árbol
Para una solución de solo CSS (y sin iconos) con Bootstrap 3 tuve que hacer un poco de toque basado en la respuesta anterior de Martin Wickman.
No usé la notación acordeón- * porque está hecha con paneles en BS3.
Además, tuve que incluir en el HTML inicial aria-expanded = "true" en el elemento que está abierto en la carga de la página.
Aquí está el CSS que utilicé.
.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
Aquí está mi HTML sanitizado:
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id=“acc1-1” class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
</a>
</span>
</div>
<div id=“acc1-2” class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
Se agregó a la respuesta de @muffls para que funcione con todos los colapso de bootstrap de twitter y realice el cambio en la flecha antes de que comience la animación.
$(''.collapse'').on(''show'', function(){
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on(''hide'', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});
Dependiendo de su estructura HTML, puede necesitar modificar el parent() .
Si alguien está interesado, así es como lo haces con BS3 ya que cambiaron los nombres de los eventos:
$(''.collapse'').on(''show.bs.collapse'', function(){
var i = $(this).parent().find(''i'')
i.toggleClass(''fa-caret-right fa-caret-down'');
}).on(''hide.bs.collapse'', function(){
var i = $(this).parent().find(''i'')
i.toggleClass(''fa-caret-down fa-caret-right'');
});
Simplemente cambie los nombres de clase en el ejemplo a los que usa en su caso.
Una solución bootstrap v3 (donde los eventos tienen diferentes nombres), también usa solo un selector jQuery (como se ve here ):
$(''.accordion'').on(''hide.bs.collapse show.bs.collapse'', function (n) {
$(n.target).siblings(''.panel-heading'').find(''i.glyphicon'').toggleClass(''glyphicon-chevron-down glyphicon-chevron-up'');
});
Utilice el pseudo-selector CSSes: después de usar los Glyphicons integrados de Bootstrap 3 para una respuesta sin JS con una modificación menor en su HTML ...
CSS
.panel-heading [data-toggle="collapse"]:after
{
font-family: ''Glyphicons Halflings'';
content: "/e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
HTML
Agregue class="collapsed" a cualquier etiqueta de anclaje que esté cerrada de forma predeterminada.
Esto hará que los anclajes como
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
dentro
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Ejemplo de CodePen Live
http://codepen.io/anon/pen/VYobER
Captura de pantalla