Bootstrap 3 Collapse show state com o ícone da Chevron

Usando o exemplo principal retirado da página de exemplos Javascript do Bootstrap 3 para Recolher , consegui mostrar o estado de recolhimento usando icons da divisa.

Eu tenho esse trabalho 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"); }); 

Isso funciona (não totalmente testado em todos os navegadores), mas eu estou querendo saber se há uma solução mais elegante para isso?

Idealmente, gostaria de usar a function principal, mas não tenho certeza de como obter os mesmos resultados com ela.

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

Aqui está uma versão de trabalho no jsfiddle .

Para o seguinte HTML (dos exemplos do 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.

Você poderia usar esse 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); 

=> Trabalhando JsFiddle

Para melhorar a resposta com o maior número de upticks, alguns de vocês devem ter notado, no carregamento inicial da página, que todas as divisas apontam na mesma direção. Isso é corrigido adicionando a class “recolhida” aos elementos que você deseja carregar recolhidos.

 
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.

Aqui está um violino de trabalho: http://jsfiddle.net/3gYa3/585/

Graças a biggates e steakpi. Como resposta da pergunta Dreamonic, fiz algumas pequenas alterações para tornar todos os headers clicáveis ​​(não apenas string de título e gluphs) e tirei o sublinhado do link. Para forçar um icons aparecer na mesma linha, adicionei h4 no final das instruções CSS. Aqui está o 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.

E o 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; } 

Melhoria na resposta do Bludream:

Você pode definitivamente usar FontAwesome!

Certifique-se de include “colapsado” junto com a class “header do painel”. A class “recolhida” não é incluída até que você clique no painel para include a class “recolhida” para exibir a divisa correta (isto é, a divisa-direita é exibida quando recolhida e colocada para baixo quando aberta).

HTML

 

Lorem ipsum...

CSS

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

Além disso, é uma boa prática criar uma nova class em vez de usar uma class existente.

Veja Codepen por exemplo: http://codepen.io/anon/pen/PPxOJX

Aqui está um par de classs auxiliares CSS css que permite lidar com qualquer tipo de conteúdo de alternância no seu html.

Funciona com qualquer elemento que você precise alternar. Seja qual for o seu layout, basta colocá-lo dentro de alguns elementos com as classs .if-collapsed e .if-não-recolhidos dentro do elemento de alternância.

O único problema é que você precisa se certificar de colocar o estado inicial desejado da alternância. Se estiver fechado inicialmente, coloque uma class recolhida na alternância.

Também requer o seletor : not , não funciona no IE8.

Exemplo de HTML:

  
...

Menos versão:

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

Versão CSS:

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

trabalhando exemplo simples

  • obter a condição corporal mostrada / ocultada
  • chegar ao seu pai att
  • obtenha o ícone de localização
  • mudar ícone

entre simples

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"); }); 

ou … você pode simplesmente colocar algum estilo assim.

 .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

Estou usando a fonte incrível ! e queria que um painel fosse dobrável

  
products
....

e o css

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

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Angular parece causar problemas com as abordagens baseadas em JavaScript aqui (pelo menos as que eu tentei). Eu encontrei esta solução aqui: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . A essência disso é usar data-ng-click no botão de alternância e fazer o método para alterar o botão no controlador usando o contexto $scope .

Eu acho que eu poderia fornecer mais detalhes … meus botões estão ajustados para o glifo do estado inicial do div que eles colapsam (glyphicon-chevron-right = = colapso div).

page.html:

 
...

controllers.js:

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

Se você está tentando usar isso apenas com painéis (não acordeão), tente este código:

 
Panel content

One-liner.

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

Neste exemplo, ele está sendo usado para agrupar linhas de tabela recolhíveis. A única coisa que você precisa fazer é adicionar o nome da class de destino (my-collapse-name) ao seu ícone:

   Master Row - Title    Detail Row - Content  

Você poderia fazer o mesmo com a class de careta nativa do Bootstrap usando e span.caret.collapse.in { transform: rotate(90deg); } span.caret.collapse.in { transform: rotate(90deg); }

Eu sei que isso é antigo, mas como agora é 2018, eu pensei em responder fazendo isso simplificando o código e aprimorando a experiência do usuário fazendo a chevron girar com base no colapso ou não. Eu estou usando FontAwesome no entanto. Aqui está o 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); } 

Aqui está o HTML para a seção do painel:

  
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.

Eu uso bootstraps puxar-direita para puxar a chevron todo o caminho para a direita do header do painel que deve ser de largura total e responsivo. O CSS faz todo o trabalho de animação e rotaciona a divisa com base em se o painel é recolhido ou não. Simples.

Eu queria uma abordagem html pura, pois queria reduzir e expandir o html que foi adicionado na hora através de um modelo! Eu inventei isso …

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

 var noJavascript = ":)"; 

O que pode ser útil para alguém 🙂