Hinzufügen eines offenen / geschlossenen Symbols zu Twitter Bootstrap Collapsibles (Akkordeons)

Ich habe diese einfache Version des Bootstrap- Akkordeons eingerichtet :

Einfaches Akkordeon: http://jsfiddle.net/darrenc/cngPS/

Derzeit zeigt das Symbol nur nach unten , aber weiß jemand, welche JS implementiert werden muss, um die Klasse des Symbols in Folgendes zu ändern:

<i class="icon-chevron-up"></i>

... so dass er zeigt nach oben , wenn erweitert und wechselt zurück zu nach unten wieder , wenn zusammenbrach, und so vierten?

Hier ist die Antwort für diejenigen, die nach einer Lösung in Bootstrap 3 suchen (wie ich).

Der HTML-Teil:

<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>

Der js Teil:

$('.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");
});

Beispiel Akkordeon:

Bootply Akkordeon Beispiel

Hier ist mein Ansatz für Bootstrap 2.x. Es ist nur ein CSS. Kein JavaScript erforderlich:

    .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;
    }

Fügen Sie der Akkordeon-Gruppe div einfach die Klasse Akkordeon-Caret hinzu :

<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>

Der Bootstrap-Zusammenbruch enthält einige Ereignisse, auf die Sie reagieren können:

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

Verwenden Sie den CSSes-Pseudo-Selektor: Nachdem Sie die integrierten Glyphicons von Bootstrap 3 für eine Antwort ohne JS mit geringfügigen Änderungen an Ihrem HTML- Code verwendet haben ...

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

Fügen Sie class="collapsed"Anker-Tags hinzu, die standardmäßig geschlossen sind.

Dadurch werden Anker wie z

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

in

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePen Live-Beispiel

http://codepen.io/anon/pen/VYobER

Bildschirmfoto

Zu @muffls Antwort hinzugefügt, damit dies bei allen Twitter-Bootstrap-Kollaps funktioniert und die Änderung am Pfeil vor Beginn der Animation vorgenommen wird.

$('.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");
});

Abhängig von Ihrer HTML-Struktur müssen Sie möglicherweise die ändern parent().

Ich denke, die besten Codes sind diese:

  $('#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");
      });

Wenn jemand interessiert ist, machen Sie das mit BS3 so, da er die Ereignisnamen geändert hat:

$('.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');
});

Sie ändern einfach die Klassennamen im Beispiel in die Namen, die Sie in Ihrem Fall verwenden.

Die am besten lesbare Nur-CSS-Lösung wäre wahrscheinlich die Verwendung des arienerweiterten Attributs. Denken Sie daran, dass Sie allen Collapse-Elementen aria-expand = "false" hinzufügen müssen, da dies nicht beim Laden festgelegt wird (nur beim ersten Klick).

Der 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>

Das 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;
}

Funktioniert mit Bootstrap 3.x.

Hier ist meine Lösung, die von einer von @ john-magnolia veröffentlichten weiter verfeinert wurde und einige ihrer Probleme löst

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

Und hier ist das Beispiel-Markup:

<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>

Eine Bootstrap v3-Lösung (bei der die Ereignisse unterschiedliche Namen haben), die auch nur einen jQuery-Selektor verwendet (wie hier gezeigt ):

$('.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');
});

So mache ich es ohne js.

Ich habe das Symbol Glyphicon-Dreieck rechts verwendet, aber es funktioniert mit jedem anderen Symbol. Es bewirkt, dass das Symbol um 90 Grad gedreht wird, wenn das Bedienfeld geöffnet ist oder nicht. Ich benutze Bootstrap 3.3.5 für diesen.

CSS-Code

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

Dies ist die HTML-Struktur aus dem Bootstrap-Beispiel

<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>

Keines der oben genannten hat bei mir funktioniert, aber ich habe es mir ausgedacht und es hat funktioniert:

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

HTML-Implementierung:

<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:

RE Martin Wickmans CSS-Version ...

Sie können dieses Problem umgehen, indem Sie Akkordeon-Caret auf das Ankertag setzen und ihm standardmäßig eine reduzierte Klasse geben. Wie so:

<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>

Das hat bei mir funktioniert.

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

Manchmal muss man so schreiben. Wenn ja

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');

Automatisch generiert (class = "reduziert"), wenn Sie auf das Menü "Ausblenden" klicken.

ps, wenn Sie ein Baummenü erstellen müssen

Dies wurde auf zahlreiche Arten beantwortet, aber was ich mir ausgedacht habe, war das einfachste und einfachste für mich mit Bootstrap 3 und einer fantastischen Schriftart. Ich habe es gerade getan

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

Dadurch wird nur die CSS-Klasse des Symbols umgeschaltet, das ich anzeigen möchte. Ich füge die Klasse toggler zu dem Element hinzu, auf das ich dies anwenden möchte. Dies kann zu jedem Element hinzugefügt werden, bei dem Sie ein Symbol umschalten möchten.

Eine weitere No-Javascript-Lösung, die die Collapse-Funktionalität selbst verwendet:

/* 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>

Für eine reine CSS-Lösung (und ohne Symbole) mit Bootstrap 3 musste ich ein bisschen herumspielen, basierend auf der obigen Antwort von Martin Wickman.

Ich habe die Akkordeon- * Notation nicht verwendet, da sie mit Panels in BS3 erstellt wurde.

Außerdem musste ich in das anfängliche HTML aria-expand = "true" für das Element aufnehmen, das beim Laden der Seite geöffnet ist.

Hier ist das CSS, das ich verwendet habe.

.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; }

Hier ist mein bereinigtes HTML:

<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>

Kürzestmögliche Antwort.

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>

Und natürlich können Sie alles für einen Selektor anstelle eines Ankertags verwenden, aund Sie können auch einen bestimmten Selektor verwenden, anstatt thiswenn Ihr Symbol außerhalb Ihres angeklickten Elements liegt.