it-swarm.com.de

Twitter Bootstrap collapsibles (Akkordeons) zum Öffnen/Schließen hinzufügen

Ich habe diese einfache Version des Bootstrap Akkordeon eingerichtet:

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

Derzeit zeigt das Symbol nur down, aber weiß jemand, was JS implementieren müsste, um die Klasse des Symbols in Folgendes zu ändern:

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

... so dass es auf zeigt, wenn expandiert und wieder auf abwärts umschaltet, wenn es zusammengebrochen ist, und so viert?

80
Darren

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

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

91
Andrei Veve

Hier ist mein Ansatz für Bootstrap 2.x. Es ist nur ein paar 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;
    }

Füge einfach class Akkordeon-Caret zum Akkordeon-Gruppendiv hinzu, wie folgt:

<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>
46
Martin Wickman

Der Bootstrap Collapse 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");
    });
});
42
Philipp Hofmann

Verwenden Sie den CSS-Pseudo-Selector: Nachdem Sie die integrierten Glyphicons von Bootstrap 3 für eine no JS-Antwort 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" zu Ankertags hinzu, die standardmäßig geschlossen sind.

Dadurch werden Anker wie

<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

20
bafromca

@Muffls antwort hinzugefügt, so dass dies mit allen Twitter-Bootstrap-Ausfällen funktioniert und die Änderung des Pfeils vor dem Start der Animation erfolgt.

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

16
John Magnolia

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
user2273425

Wenn jemand interessiert ist, tun Sie dies mit BS3, da die Ereignisnamen geändert wurden:

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

6
rbsthlm

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

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

Hier ist meine Lösung, die von @ john-magnolia weiterentwickelt 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>
3
Mikko Ohtamaa

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

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

3

So mache ich es ohne js. 

Ich habe das Symbol Glyphicon-Dreieck-Rechts verwendet, funktioniert aber mit jedem anderen Symbol. Das Symbol wird dann um 90 Grad gedreht, 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>
2

Keines der oben genannten Dinge funktionierte für mich, aber ich kam dazu 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>
      ...
2
Joshua Benson

Dies wurde auf vielfältige Weise beantwortet, aber ich habe mit Bootstrap 3 und Font Awesome das einfachste und einfachste für mich gefunden. 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 dem Element hinzu, auf das ich das anwenden möchte. Dies kann zu jedem Element hinzugefügt werden, mit dem Sie ein Symbol umschalten möchten.

1
Micah Montoya

@RobSadler:

RE Martin Wickman nur CSS-Version ...

Sie können dieses Problem umgehen, indem Sie den Anker-Tag mit einem Akkordeon-Einraster versehen und ihm standardmäßig eine eingestürzte Klasse zuweisen. So wie:

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

1
RioBrewster

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

Wird automatisch generiert (class = "collapsed"), wenn Sie das Hide-Menü drücken.

ps, wenn Sie ein Baummenü erstellen müssen

1
Popov Andrey

Für eine CSS-reine (und ikonfreie) Lösung unter Verwendung von Bootstrap 3 musste ich anhand der obigen Antwort von Martin Wickman ein wenig herumspielen. 

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

Außerdem musste ich in den ursprünglichen HTML-Code aria-expand = "true" für das Element einschließen, das beim Laden der Seite geöffnet ist. 

Hier ist das von mir verwendete CSS.

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

Eine weitere No-Javascript-Lösung, die die Collapse-Funktion 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>

Kürzeste mö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>

Natürlich können Sie alles für einen Selektor anstelle des Ankertags a verwenden, und Sie können auch einen bestimmten Selektor anstelle von this verwenden, wenn Ihr Symbol außerhalb des angeklickten Elements liegt.

0
Junaid