Ajout d'une icône d'ouverture/fermeture aux pliages Twitter Bootstrap (accordéons)

Question

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

Un simple accordéon : http://jsfiddle.net/darrenc/cngPS/

Actuellement, l'icône indique seulement en bas mais quelqu'un sait-il quel JS il faudrait implémenter pour changer la classe de l'icône en :

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

...pour qu'il indique en haut quand élargi et bascule à nouveau vers en bas à nouveau lorsqu'il s'est effondré, et ainsi de suite jusqu'au quatrième ?

Answer 1

Voici la réponse pour ceux qui cherchent 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

Answer 2

Voici mon approche pour Bootstrap 2.x. Il s'agit juste de 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;
    }

Il suffit d'ajouter la 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>

Answer 3

L'effondrement de Bootstrap 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");
    });
});

Answer 4

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

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

Cela transformera les ancres telles que

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

en

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

Exemple de CodePen en direct

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

Capture d'écran

Answer 5

Ajouté à la réponse de @muffls pour que cela fonctionne avec tous les collapse twitter bootstrap et fasse le changement de la flèche avant que l'animation ne commence.

$('.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 la structure de votre HTML, vous devrez peut-être modifier le fichier parent() .