web-dev-qa-db-fra.com

Comment ajouter un symbole plus moins à un accordéon bootstrap

J'utilise un accordéon bootstrap, où le premier panneau est toujours ouvert et le panneau ouvert reçoit une classe in. Je vérifie depuis mon code jQuery si la classe contient la classe in, elle met en évidence cette ancre. Mais actuellement toutes les ancres sont mises en évidence.

Je veux juste que le premier point d’ancrage soit ouvert et que le panneau fermé reste ait un style différent. 

voici le violon: Fiddle

Comme vous pouvez le voir, toutes les balises d'ancrage sont en surbrillance. Je veux que la première ancre ait un style différent. L'idée est d'ajouter le symbole plus/moins à l'accordéon.

jqueryhtmlcsstwitter-bootstrap-3
10
Leroy Mikenzi

Essayez l'événement show de collapse - bootstrap 3+

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

puis

.panel-heading.active {
    background-color: green;
}

Démo: Fiddle

Dans votre code

$(document).ready(function () {
    if ($('div').filter(':not(in)')) {
        $('.panel-title a').addClass('active');
    }
});

La méthode filter () retourne un objet jQuery, donc ce sera toujours la vérité. Vous ajoutez également la classe à tous les éléments d'ancrage du titre, qu'elle soit active ou non. Vous ne la modifiez pas non plus lorsque l'accordéon est modifié

7
Arun P Johny

A légèrement modifié la réponse @Arun P Johny vue de dessus

First: le <i> a été remplacé par une balise <span>, par document de Bootstrap 3

Second: ajout d'un deuxième contrôle d'événement pour les utilisateurs fermant un onglet ouvert, supprimant la classe et remplaçant l'icône moins par une icône plus

Fiddle

var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
8
Kender

Si vous souhaitez modifier la classe plus/moins en réduisant le même panneau, vous pouvez utiliser javascript de cette manière (fonctionne également sur plusieurs panneaux).

<script>
var selectIds =$('#collapse1,#collapse2,#collapse3');
    $(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
    })
});
</script>

Cela fonctionne pour ce bloc html

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
            </h4>
        </div>
    <div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
            Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

vérifier cet exemple jsFiddle http://jsfiddle.net/navjottomer/8u57u/4/

6
nav

Exemple de travail! Vous pouvez ajouter la classe standard réduite à tous les onglets, puis utiliser simplement CSS comme ceci:

.subnav-button .glyphicon-plus:before {
    content: "\2212";
}
.collapsed .glyphicon-plus:before {
    content:  "\2b";
}

Où .subnav-button est la classe de boutons souhaitée et l’utilisation d’icônes d’amorçage standard. Le contenu de plus sera alors remplacé par le contenu de moins chaque fois que la classe réduite ne se trouvera pas sur votre bouton (ce qui correspond exactement au moment où l'onglet n'est pas réduit).

C'est le code HTML au début:

<button data-toggle="collapse" class="subnav-button collapsed" data-target="#subnav-110">
  <li class="renoi-first-floor">
    Sitemap&nbsp;
    <span class="glyphicon glyphicon-plus subnav-icon" aria-hidden="true"></span>
  </li>
</button>

Le seul inconvénient, c’est que vous ne pouvez plus utiliser l’icône Plus dans un onglet réduit sans que cela devienne un moins. Si vous voulez, vous pouvez bien sûr copier la classe dans une nouvelle classe comme celle-ci:

.glyphicon-accordion-plus-minus < .glyphicon-plus

Et changer le CSS au début de mon article dans la nouvelle classe à la place, puis utiliser la nouvelle classe dans le code HTML de votre accordéon au lieu de simplement glyphicon-plus. 

6
Lightningsoul

C'est mon css

.my-button.collapse-nav-button:before {
    content: "\2212";
}
.collapsed .my-button.collapse-nav-button:before {
    content:  "\2b";
}

C'est mon bouton

<span class="my-button collapse-nav-button"></span>

Et ceci est mon tout l'accordéon html avec le bouton ci-dessus

<div class="panel panel-default" ng-repeat="list in table_models">
 <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse1">
    <h1 class="panel-title">
        <span class="my-button collapse-nav-button"></span>
        <a data-toggle="collapse" data-target="#colapse1" href="#">Open/Close</a>       
    </h1>
 </div>
 <div class="panel-collapse collapse fade" id="collapse1">
    <div class="panel-body">
    <!--Accordion body -->
   </div>
 </div>
</div>

Quelqu'un a répondu de la même manière, mais ni les gens ne l'ont voté, ni il a bien fini avec la citation selon laquelle il y a des inconvénients. Je ne sais pas de quel inconvénient il parlait. Mais j’ai pensé que, au lieu de l’éditer, on ajouterait une réponse soignée même si j’ai voté pour lui ... Je pense qu’il ne devrait pas être nécessaire de coder en javascript pour cela. Parce que css et html peuvent être facilement réalisés, alors pourquoi jeter un œil sur votre page?

2
Sahib Khan

J'ai pu accomplir cela avec quelques lignes de HTML et CSS.

a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator {
  display: none;
}
<span class="collapsedIndicator">+</span>
<span class="expandedIndicator">-</span>

Il vous suffit de placer les balises span dans votre code HTML à l'endroit où vous souhaitez que le plus ou le moins soit, puis d'ajouter la règle CSS à votre feuille de style. Si vous utilisez bootstrap 3 ou une version antérieure, vous pouvez utiliser des glyphicons au lieu du texte brut plus et moins utilisé. Cela semble être la solution la plus simple.

1
ClarksonDev

Ok, il faut une nouvelle réponse car Twitter Bootstrap et jQuery changent beaucoup de choses et qu’il faut une automatisation:

(function($) {
    $(document).ready(function(){
        if($(".collapse.in").length)
        {
            $(".collapse.in").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-down pull-left"></span> ');
        }
        else
        {
            $(".collapse").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-right pull-left"></span> ');
        }
        $('.panel-collapse').on({
            'hidden.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
            },
            'show.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
            }
        });
    });    
})(jQuery);

Cela fonctionne bien avec Twitter Bootstrap version 3.x et jQuery 1.10.3 et toutes les autres.

0
Ivijan Stefan Stipić

Oui, juste une autre réponse, mais dans mon cas, cela fonctionnera si vous avez ou non des données parent qui aident à archiver un seul fichier ouvert et que toutes les gauches sont proches.

    <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 data-toggle="collapse" href=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="glyphicon glyphicon-minus"></i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div  class="panel-collapse collapse in collapseOne" 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 class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href=".collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseTwo" role="tabpanel" aria-labelledby="headingTwo">
                <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 class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse"  href=".collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseThree" role="tabpanel" aria-labelledby="headingThree">
                <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>
    <script>
        jQuery(function ($) {
            $('[data-toggle="collapse"]').on('click', function() {
                var $this = $(this),
                        $parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
                if($parent === undefined) { /* Just toggle my  */
                    $this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
                    return true;
                }

                /* Open element will be close if parent !== undefined */
                var currentIcon = $this.find('.glyphicon');
                currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
                $parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');

            });
        });
    </script>
0
christian Nguyen

Ajouter une couleur de fond à la liste: active vous donnera une différenciation que vous recherchez, mais si vous voulez vraiment un bouton, bootstrap utilise des glyphicons. C'est ce que j'ai fait au mien et ça a l'air bien

<button type="button" class="btn btn-green"><span class="glyphicon glyphicon-plus"></span> Add Close Day</button>
0
LOTUSMS