web-dev-qa-db-fra.com

Ajouter une icône ouverte/fermée à Twitter Collapsibles Bootstrap (accordéons)

J'ai mis en place cette version simple de Bootstrap accordéon :

Accordéon simple:http://jsfiddle.net/darrenc/cngPS/

Actuellement, l'icône ne pointe que bas, mais est-ce que quelqu'un sait ce que JS doit être implémenté pour pouvoir changer la classe de l'icône en:

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

... pour qu'il pointe haut quand développé et revienne à bas de nouveau lorsqu'il est réduit, et donc quatrième?

javascriptjquerytwitter-bootstrap
80
Darren

Voici la solution pour ceux qui recherchent une solution dans Bootstrap 3 (comme moi).

La partie HTML:

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

La partie js:

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

Exemple d'accordéon:

Exemple d'accordéon bootply

91
Andrei Veve

Voici mon approche pour Bootstrap 2.x. C'est juste quelques css. Pas de JavaScript nécessaire:

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

Ajoutez juste classe accordéon-caret au div du groupe accordéon, comme ceci:

<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

La réduction d'amorçage comporte certains événements auxquels vous pouvez réagir:

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

Utiliser le pseudo-sélecteur CSS: après avoir utilisé les glyphiques intégrés à Bootstrap 3 pour un pas de réponse JS avec une modification mineure de votre code 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

Ajoutez class="collapsed" à toutes les balises d'ancrage fermées par défaut.

Cela fera tourner des ancres telles que

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

dans

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

Exemple en temps réel CodePen

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

Capture d'écran

How it appears in JSBin

20
bafromca

Ajouté à @muffls answer pour que cela fonctionne avec tous les effondrements de bootstrap de Twitter et apporte le changement à la flèche avant le début de l'animation.

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

En fonction de votre structure HTML, vous devrez peut-être modifier la parent().

16
John Magnolia

Je pense que les meilleurs codes sont ceux-ci:

  $('#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

Si quelqu'un est intéressé, voici comment procéder avec BS3, puisqu'ils ont changé le nom de l'événement:

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

Vous changez simplement les noms de classe dans l'exemple pour ceux que vous utilisez dans votre cas.

6
rbsthlm

Une solution bootstrap v3 (où les événements ont des noms différents), utilisant également un seul sélecteur jQuery (comme vu ici ):

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

Voici ma solution qui est encore affinée par celle postée par @ john-magnolia et qui résout certains de ses problèmes.

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

Et voici l'exemple de balisage:

<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

La solution CSS la plus lisible serait probablement d'utiliser l'attribut aria-expand. N'oubliez pas que vous aurez besoin d'ajouter aria-expand = "false" à tous les éléments collapse car ce paramètre n'est pas défini au chargement (uniquement au premier clic).

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

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

Fonctionne avec Bootstrap 3.x.

3
Andreas Bergström

C'est comme ça que je le fais sans aucun js. 

J'ai utilisé l'icône glyphicon-triangle-right, mais cela fonctionne avec n'importe quelle autre icône. L'application applique une rotation de 90 degrés à l'icône lorsque le panneau est ouvert ou non. J'utilise Bootstrap 3.3.5 pour celui-ci.

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

Ceci est la structure HTML extraite de l'exemple 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>
2
General Electric

Rien de ce qui précède n'a fonctionné pour moi, mais j'ai trouvé ceci et cela a fonctionné

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

Implémentation 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>
      ...
2
Joshua Benson

Cela a été résolu de nombreuses façons, mais ce que j’ai imaginé était le plus simple et le plus facile pour moi avec Bootstrap 3 et une police de caractères géniale. je viens de faire

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

Cela ne fait que basculer la classe CSS de l'icône que je veux montrer. J'ajoute la classe toggler à l'élément auquel je souhaite l'appliquer. Cela peut être ajouté à n'importe quel élément pour lequel vous souhaitez basculer une icône.

1
Micah Montoya

@RobSadler:

RE Version de Martin Wickman uniquement en CSS ...

Vous pouvez contourner ce problème en mettant accordéon-caret sur la balise anchor et en lui donnant une classe réduite par défaut. Ainsi:

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

Cela a fonctionné pour moi.

1
RioBrewster

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

Parfois, il faut écrire ainsi. Si c'est le cas 

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

Généré automatiquement (class = "collapsed") lorsque vous appuyez sur le menu masquer.

ps lorsque vous avez besoin de créer un menu arborescent

1
Popov Andrey

Pour une solution utilisant CSS uniquement (et sans icône) avec Bootstrap 3, je devais jouer un peu de bidouillage sur la base de la réponse de Martin Wickman ci-dessus. 

Je n'ai pas utilisé la notation accordéon *, car cela est fait avec des panneaux dans BS3. 

De plus, je devais inclure dans le code HTML initial aria-expand = "true" sur l'élément ouvert au chargement de la page. 

Voici le CSS que j'ai utilisé.

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

Voici mon code HTML assaini:

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

Une autre solution sans JavaScript qui utilise la fonctionnalité de réduction elle-même:

/* 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>
0
Sebastian Sangervasi

Réponse la plus courte possible.

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>

Et bien sûr, vous pouvez utiliser n'importe quoi pour un sélecteur au lieu de la balise d'ancrage a et vous pouvez également utiliser un sélecteur spécifique au lieu de this si votre icône est en dehors de l'élément sur lequel vous avez cliqué.

0
Junaid