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

I l'utilisation d'un bootstrap de l'accordéon, dans lequel le premier panneau est toujours ouverte et le panneau est ouvert obtient une classe dans . Je vérifie de mon code jquery pour voir si la classe contient la classe dans il souligne que le point d'ancrage . Mais actuellement, l'ensemble de l'ancre sont mis en évidence.

Je veux juste le premier point d'ancrage à obtenir en surbrillance qui est ouvert et reste fermé panneau devrait avoir un peu de style différent.

ici est le violon : Violon

Comme vous pouvez le voir tous les tags ancres sont mis en évidence. Je veux d'abord d'ancrage pour obtenir un peu différent style. L'idée est d'ajouter de la plus /moins le symbole de l'accordéon.

source d'informationauteur Leroy Mikenzi | 2014-03-07

  1. 7

    Essayer le spectacle événement de l'effondrement - 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: Violon

    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 il rebord de toujours être truthy, vous êtes également à l'ajout de la classe de tous les éléments d'ancrage dans le titre, indépendamment de savoir si elle est active ou pas, que vous n'êtes pas le changer lors de l'accordéon est changé

  2. 8

    Apporté une légère modification à la @Arun P Johny réponse à partir de ci-dessus

    Première: modification de la <i> à un <span> balise, par Bootstrap 3 situés sur la

    Deuxième: ajout d'un deuxième événement, rendez-vous pour les utilisateurs de la fermeture d'un onglet ouvert, le retrait de la classe et de changer l'icône "moins" pour une icône plus

    Violon

    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');
});
  3. 6

    Si vous souhaitez modifier plus ou moins de classe sur l'effondrement même panneau que vous pouvez utiliser javascript(Également travailler sur de multiples panneau)

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

    C'est de travailler 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>

    cochez cette jsFiddle exemple http://jsfiddle.net/navjottomer/8u57u/4/

  4. 6

    Exemple de travail!
    Vous pouvez ajouter la classe standard s'est effondré à tous les onglets, puis il suffit d'utiliser le CSS comme ceci:

    .subnav-button .glyphicon-plus:before {
    content: "12";
}
.collapsed .glyphicon-plus:before {
    content:  "b";
}

    Où .subnav-bouton de votre choix touche de classe et en utilisant la norme de bootstrap icônes. Contenu de plus sera remplacé par le contenu de moins à chaque fois que la classe s'est effondré ne mentez pas sur votre bouton (ce qui est exactement à chaque fois que l'onglet est pas effondré).

    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 est que vous ne pouvez pas utiliser l'icône plus dans un effondrement de l'onglet nouveau, sans qu'il a changé en un moins, trop. Si vous souhaitez que vous pourriez bien sûr de copie de la classe à un nouveau comme ceci:

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

    Et la modification de la CSS au début de mon post pour la nouvelle classe à la place, puis à l'aide de la nouvelle classe dans le code HTML de votre accordéon au lieu de simplement glyphicon-plus.

  5. 2

    C'est mon css

    .my-button.collapse-nav-button:before {
    content: "12";
}
.collapsed .my-button.collapse-nav-button:before {
    content:  "b";
}

    C'est mon bouton

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

    Et c'est ma toute 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 ont voté à lui, ni qu'il s'est bien terminé avec la citation qu'il a la baisse. Je ne sais pas quel inconvénient il parlait. Mais j'ai pensé à la place de l'édition que l'on permet ajouter une réponse significative si je place l'ont élu.
    Je suggère qu'il ne devrait pas avoir besoin de javascript de codage pour cette. Car il peut facilement être fait avec le css et le html alors, pourquoi la litière de votre page.?

  6. 0

    L'ajout d'une couleur de fond à la :active liste va vous donner une différenciation que vous cherchez, mais si vous voulez vraiment un bouton, bootstrap utilise glyphicons. C'est ce que j'ai fait pour le mien et il semble bon

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

    Oui, juste une autre réponse, mais dans mon cas, il ne fonctionnera que si vous avez ou pas des données-parent qui aide à archive qui vient d'ouvrir et de toutes les gauches est proche.

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

    Ok ce besoin de réponse parce que Twitter Bootstrap et jQuery changer beaucoup de choses et vous avez besoin d'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);

    Ce bien travailler avec Twitter Bootstrap version 3.x et jQuery 1.10.3 et tout le reste au-dessus.