Ho impostato questa semplice versione della fisarmonica Bootstrap :
Fisarmonica semplice: http://jsfiddle.net/darrenc/cngPS/
Attualmente l'icona punta solo verso il basso , ma qualcuno sa quale JS sarebbe necessario implementare in modo da cambiare la classe dell'icona in:
<i class="icon-chevron-up"></i>
... in modo che punti verso l'alto quando espanso e ritorni nuovamente verso il basso quando collassato, e quindi quarto?
Risposte:
Ecco la risposta per chi cerca una soluzione in Bootstrap 3 (come me).
<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>
$('.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");
});
Ecco il mio approccio per Bootstrap 2.x. È solo un css. Nessun JavaScript necessario:
.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;
}
Aggiungi semplicemente class accordion-caret al div del gruppo di fisarmoniche, in questo modo:
<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>
Il Bootstrap Collapse ha alcuni eventi a cui puoi reagire:
$(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");
});
});
Usa lo pseudo-selettore CSS: dopo aver utilizzato i Glyphicons integrati di Bootstrap 3 per una risposta no JS con piccole modifiche al tuo 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
Aggiungi class="collapsed"a tutti i tag di ancoraggio chiusi per impostazione predefinita.
Questo trasformerà ancore come
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
in
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
CodePen Live Esempio
http://codepen.io/anon/pen/VYobER
Immagine dello schermo
Aggiunto alla risposta @muffls in modo che funzioni con tutti i compressori bootstrap di Twitter e apporti la modifica alla freccia prima che inizi l'animazione.
$('.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");
});
A seconda della struttura HTML potrebbe essere necessario modificare il file parent().
Penso che i codici migliori siano questi:
$('#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");
});
Se qualcuno è interessato, ecco come lo fai con BS3 poiché hanno cambiato i nomi degli eventi:
$('.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');
});
Devi semplicemente cambiare i nomi delle classi nell'esempio con quelli che usi nel tuo caso.
La soluzione più leggibile solo CSS sarebbe probabilmente quella di utilizzare l'attributo aria-espanso. Ricorda che dovrai aggiungere aria-Expand = "false" a tutti gli elementi di compressione poiché questo non è impostato al caricamento (solo al primo clic).
<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>
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;
}
Funziona con Bootstrap 3.x.
Ecco la mia soluzione che è ulteriormente perfezionata da quella pubblicata da @ john-magnolia e risolve alcuni dei suoi problemi
/**
* 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");
});
}
Ed ecco il markup di esempio:
<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>
Una soluzione bootstrap v3 (dove gli eventi hanno nomi diversi), utilizzando anche un solo selettore jQuery (come visto qui ):
$('.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');
});
È così che lo faccio senza js.
Ho usato l'icona glyphicon-triangle-right ma funziona con qualsiasi altra icona, quello che fa è che applica una rotazione di 90 gradi all'icona quando il pannello è aperto o meno. Sto usando Bootstrap 3.3.5 per questo.
Codice 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);
}
Questa è la struttura HTML presa dall'esempio 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>
Nessuno dei precedenti ha funzionato per me, ma mi è venuto in mente questo e ha funzionato:
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");
}
Implementazione 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>
...
@RobSadler:
Versione solo CSS di RE Martin Wickman ...
Puoi aggirare il problema mettendo fisarmonica-caret sul tag di ancoraggio e assegnandogli una classe compressa per impostazione predefinita. Così:
<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>
Ha funzionato per me.
Per 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 volte devi scrivere così. Se è così
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
Generato automaticamente (class = "collapsed"), quando premi il menu nascondi.
ps quando è necessario creare un menu ad albero
Questo è stato risolto in molti modi, ma quello che mi è venuto in mente è stato il più semplice e facile per me con Bootstrap 3 e il font fantastico. L'ho appena fatto
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
Questo attiva o disattiva la classe CSS dell'icona che voglio mostrare. Aggiungo il commutatore di classe all'elemento a cui voglio applicarlo. Questo può essere aggiunto a qualsiasi elemento per cui desideri attivare o disattivare un'icona.
Un'altra soluzione senza javascript che utilizza la funzionalità di compressione stessa:
/* 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>
Per una soluzione solo CSS (e senza icone) che utilizza Bootstrap 3 ho dovuto giocherellare un po 'sulla base della risposta di Martin Wickman sopra.
Non ho usato la notazione accordion- * perché è fatta con i pannelli in BS3.
Inoltre, ho dovuto includere nell'HTML iniziale aria-Expand = "true" l'elemento che è aperto al caricamento della pagina.
Ecco il CSS che ho usato.
.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; }
Ecco il mio HTML igienizzato:
<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>
Risposta più breve possibile.
HTML
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
JS:
<script type="text/javascript">
$(function () {
$('a[data-toggle="collapse"]').click(function () {
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
})
})
</script>
E, naturalmente, puoi usare qualsiasi cosa per un selettore invece del tag di ancoraggio ae puoi anche usare un selettore specifico invece di thisse la tua icona si trova al di fuori del tuo elemento cliccato.
Ecco una soluzione che crea una sezione espandibile utilizzando un design un po 'materiale, bootstrap 4.5 / 5 alpha e interamente non javascript.
Stile per la sezione della testa
<style>
[data-toggle="collapse"] .fa:before {
content: "\f077";
}
[data-toggle="collapse"].collapsed .fa:before {
content: "\f078";
}
</style>
Corpo html
<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
<i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
CONTENT GOES IN HERE
</div>
.bs.collapse. Ho anche cambiato inshown and hidden to show and hidemodo che l'animazione avvenga prima che la fisarmonica si apra.