Bootstrap 4 Collapse Show Zustand mit Font Ehrfürchtiges Symbol

Question

Ich habe einen einzigen Zusammenbruch Bootstrap 4 wie folgt ...

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a> 
<div class="row collapse in" id="collapseNEWS">Content</div> 

Dies zeigt automatisch den Inhalt, es sei denn die Schrift ehrfürchtigen Symbol geklickt wird. Ich zeige das fa-chevron-circle-up-Symbol beim ersten Laden an.

Sobald das Symbol angeklickt wird, schließt sich der Inhalt und ich möchte stattdessen das fa-chevron-circle-down-Symbol anzeigen. Wie würde ich das erreichen?

Ich habe an der alpha-Dokumentation sehe: http://v4-alpha.getbootstrap.com/components/collapse/

... aber ich bin mir nicht klar, wie ich den Zustand entweder um zu zeigen ...

<i class="indicator fa fa-chevron-circle-up" aria-hidden="true"></i> 

oder ...

<i class="indicator fa fa-chevron-circle-down" aria-hidden="true"></i> 

Danke NJ

Answer 1

Sie können das Schriftart-awesome Symbol mit benutzerdefinierten CSS (Content-Eigenschaft) hinzufügen:

Verwenden Sie einfach <i class="fa"> und

[data-toggle="collapse"] .fa:before { 
    content: "\f139"; 
} 

[data-toggle="collapse"].collapsed .fa:before { 
    content: "\f13a"; 
} 

Beispiel in codepen

Answer 2

diesen weiter zu verlängern - jetzt Bootstrap 4 Beta zu verwenden, wenn Es macht einen Unterschied:

Dies wird nicht funktionieren, wenn der Anfangszustand reduziert ist - das Symbol wird umgekehrt. Klicken Sie auf den Knopf durch einen Zyklus wird es reparieren - aber es wäre schön, es richtig zu beginnen. Das Geheimnis: füge

class="collapsed" 

zu den umschaltenden Verbindung (en) hinzu. Ein Beispiel mit einem klickbaren Text sowie das Symbol Überschrift:

<div class="card-header d-flex justify-content-between" id="headingCollapse1"> 
    <div> 
     <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
      Card Header 
     </a> 
    </div> 
    <div> 
     <a data-toggle="collapse" class="collapsed btn btn-default btn-xs text-right" href="#collapse1" aria-label="Expand/Collapse Card 1" aria-expanded="false" role="button"> 
      <i class="fa" aria-hidden="true"></i> 
      <span class="sr-only">Expand/Collapse Card 1</span> 
     </a> 
    </div> 
</div> 
<div id="collapse1" class="collapse" aria-labelledby="headingCollapse1"> 
    <div class="card-body"> 
     Here is some wonderful content that you can't see...until expanded! 
    </div> 
</div> 

ich auch die Plus/Minus-Symbole intuitiven finden - mit Pfeilen, ich bin nie ganz sicher, ob es bedeutet, „aktuelle Status wird geöffnet/geschlossen "oder" zum Öffnen/Schließen drücken ". Auf der Grundlage von Baumansichten bin ich unter anderem gewohnt, dass "+" bedeutet "geschlossen/zum Öffnen klicken" und "-" bedeutet "Öffnen/Klicken zum Schließen". Während also nicht direkt Teil der Frage, die ich dies für die andere verlassen würde zu finden (volle Punktzahl oben für Format @tmg - ich gerade in den „richtigen“ Zeichen gesteckt):

[data-toggle="collapse"] i:before{ 
    content: "\f146"; 
} 

[data-toggle="collapse"].collapsed i:before{ 
    content: "\f0fe"; 
} 

Answer 3

Sie toggleClass() hinzufügen können onclick Ereignis von <a></a> Element und zusätzliche Klasse fa-rotate-180 für Element von Font Awesome icon.

fa-rotate-180 - Standardklasse von Font Awesome.

<a href='' onclick="$('#collapsed-chevron').toggleClass('fa-rotate-180')"> 
    <i class="fa fa-chevron-circle-up" id="collapsed-chevron"></i> 
    Link Text 
</a>