Cómo agregar un símbolo más menos a un acordeón de arranque

Utilizo un acordeón de arranque, donde el primer panel siempre está abierto y el panel que está abierto recibe una clase. Estoy comprobando desde mi código jquery para ver si la clase contiene una clase que resalta ese anclaje. Pero actualmente todos los anclajes están resaltados.

Solo quiero que el primer anclaje resalte que está abierto y que el panel cerrado de rest debe tener un estilo diferente.

aquí está el violín: Fiddle

Como puede ver, todas las tags de anclaje están resaltadas. Quiero el primer anclaje para obtener un estilo diferente. La idea es agregar un símbolo más / menos al acordeón.

Prueba el evento show of collapse – bootstrap 3+

jQuery(function ($) { var $active = $('#accordion .panel-collapse.in').prev().addClass('active'); $active.find('a').prepend(''); $('#accordion .panel-heading').not($active).find('a').prepend(''); $('#accordion').on('show.bs.collapse', function (e) { $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); }) }); 

entonces

 .panel-heading.active { background-color: green; } 

Demostración: Fiddle


En tu código

 $(document).ready(function () { if ($('div').filter(':not(in)')) { $('.panel-title a').addClass('active'); } }); 

El método filter () devuelve un objeto jQuery para que siempre sea verdadero, también está agregando la clase a todos los elementos de anclaje en el título, independientemente de si está activo o no, y tampoco lo está cambiando cuando se cambia el acordeón.

Se realizó una ligera modificación a la respuesta de @Arun P Johny desde arriba

Primero : Se modificó la etiqueta a , según la documentación de Bootstrap 3

Segundo : se agregó una segunda verificación de eventos para los usuarios que cierran una pestaña abierta, eliminando la clase y cambiando el ícono menos a un ícono más

Violín

 var $active = $('#accordion .panel-collapse.in').prev().addClass('active'); $active.find('a').append(''); $('#accordion .panel-heading').not($active).find('a').prepend(''); $('#accordion').on('show.bs.collapse', function (e) { $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); }); $('#accordion').on('hide.bs.collapse', function (e) { $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus'); }); 

Si desea cambiar la clase más / menos al contraer el mismo panel que puede usar Javascript de esta manera (también trabaje en múltiples paneles)

  

Está trabajando para este bloque html

 
Contents panel 1
Contents panel 2
Contents panel 3

mira este ejemplo de jsFiddle http://jsfiddle.net/navjottomer/8u57u/4/

Ejemplo de trabajo! Puede agregar la clase estándar contraída en todas las tabs y luego simplemente usar CSS de esta manera:

 .subnav-button .glyphicon-plus:before { content: "\2212"; } .collapsed .glyphicon-plus:before { content: "\2b"; } 

Donde .subnav-button es su clase de botón deseado y usando icons de arranque estándar. El contenido de más será reemplazado por el contenido de menos cuando la clase se derrumbe no se encuentra en su botón (que es exactamente cuando la pestaña no está contraída).

Este es el código HTML al principio:

  

El único inconveniente de esto es que no puede usar el ícono más en una pestaña contraída nuevamente sin que también cambie a un menos. Si lo desea, por supuesto puede copiar la clase a una nueva como esta:

 .glyphicon-accordion-plus-minus < .glyphicon-plus 

Y cambiando el CSS al comienzo de mi publicación a la nueva clase en su lugar y luego usando la nueva clase en el código HTML de su acordeón en lugar de simplemente glyphicon-plus.

Este es mi css

 .my-button.collapse-nav-button:before { content: "\2212"; } .collapsed .my-button.collapse-nav-button:before { content: "\2b"; } 

Este es mi botón

  

Y este es mi todo el accordion html con el botón de arriba

  

Alguien lo respondió de la misma manera, pero ni las personas lo votaron ni él terminó bien con la cita que tiene un inconveniente. No sé qué inconveniente estaba hablando. Pero pensé que en lugar de editar eso, dejaremos una respuesta clara, aunque yo voté por él. Sugiero que no debería haber necesidad de una encoding de JavaScript para esto. Porque se puede hacer fácilmente con css y html, ¿por qué ensuciar tu página?

Pude lograr esto con un par de líneas de html y css.

 a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator { display: none; } 
 + - 

Agregar un color de fondo a la lista: active le dará una diferenciación que está buscando, pero si realmente quiere un botón, bootstrap usa glyphicons. Esto es lo que hice a los míos y se ve bien

  

Sí, solo otra respuesta, pero en mi caso funcionará si tienes o no tienes datos-padres que ayudan a archivar solo uno abierto y todas las izquierdas están cerca.

  
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.

Ok, esto necesita una nueva respuesta porque Twitter Bootstrap y jQuery cambian muchas cosas y necesitas automatización:

 (function($) { $(document).ready(function(){ if($(".collapse.in").length) { $(".collapse.in").prev().find(".panel-title a").append(' '); } else { $(".collapse").prev().find(".panel-title a").append(' '); } $('.panel-collapse').on({ 'hidden.bs.collapse' : function (e) { var active = $(this).prev().find(".panel-title a .glyphicon"); active.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right"); }, 'show.bs.collapse' : function (e) { var active = $(this).prev().find(".panel-title a .glyphicon"); active.removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down"); } }); }); })(jQuery); 

Esto funciona muy bien con Twitter Bootstrap versión 3.xy jQuery 1.10.3 y todo lo demás arriba.