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


Ich habe diese einfache Version des Bootstraps eingerichtet Akkordeon:

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

Derzeit zeigt das Symbol nur Nieder, aber weiß jemand, was JS benötigt, um implementiert zu werden, um die Klasse des Symbols wie folgt zu ändern:

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

... damit es zeigt oben wann erweitert und wechselt zurück zu Nieder wieder wenn es zusammenbrach, und so viert?


75
2017-12-08 15:04


Ursprung


Antworten:


Hier ist die Antwort für diejenigen, die eine 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


86
2017-10-21 16:48



Hier ist mein Ansatz für Bootstrap 2.x. Es ist nur ein bisschen CSS. Kein JavaScript benötigt:

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

Einfach Klasse hinzufügen Akkordeon-Caret zum Akkordeon-Gruppen-Div, so:

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

45
2017-08-20 08:47



Der Bootstrap Collapse hat einige Ereignisse, auf die du reagieren kannst:

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

42
2017-12-08 15:18



Verwenden Sie CSSes Pseudo-Selektor: nach der Verwendung der integrierten Glyphicons von Bootstrap 3 für a keine JS Antwort mit kleinen Änderungen an Ihrem 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

Hinzufügen class="collapsed" zu allen Anker-Tags, die standardmäßig geschlossen sind.

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

How it appears in JSBin


18
2018-05-21 01:19



@Muffls Antwort hinzugefügt, so dass dies mit allen twitter-Bootstrap-Kollaps funktioniert und die Änderung des Pfeils vor dem Start der Animation bewirkt.

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


16
2018-02-24 14:03



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

10
2018-04-12 07:47



Wenn jemand interessiert ist, ist dies wie Sie es mit BS3 tun, da sie die Ereignisnamen geändert haben:

$('.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 zu denen, die Sie in Ihrem Fall verwenden.


5
2017-11-26 12:18



Hier ist meine Lösung, die von einer von @ john-magnolia geposteten Lösung weiter verfeinert wird 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>

3
2017-07-18 08:15