如何在引导手风琴中添加加减符号

Question

I using a bootstrap accordion, where the first panel is always open and the panel which is open gets a class in . I'm checking from my jquery code to see if the class contains class in it highlights that anchor . But currently all the anchor are highlighted.

I just want the first anchor to get highlighted that is open and rest closed panel should have some different style.

here is the fiddle : Fiddle

As you can see all the anchor tags are highlighted. I want first anchor to get some different styling. The whole idea is to add plus / minus symbol to the accordion.

Answer 1

Made a slight modification to the @Arun P Johny answer from above

First : Changed the <i> to a <span> tag, per Bootstrap 3 documantation

Second : added a second event check for users closing an open tab, removing the class and changing the minus icon to a plus icon

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

Answer 2

Try the show event of 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');
    })
});

then

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

Demo: Fiddle

---

In your code

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

The filter() method returns a jQuery object so it sill always be truthy, also you are adding the class to all anchor elements in the title irrespective of whether it is active or not, also you are not changing it when the accordion is changed

Answer 3

If you want to change plus/minus class on collapsing same panel than you can use javascript in this way(Also work on multiple panel)

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

It is working for this html block

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

check this jsFiddle example http://jsfiddle.net/navjottomer/8u57u/4/

Answer 4

Working example! You can add the standard class collapsed to all tabs and then just use CSS like this:

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

Where .subnav-button is your desired button class and using standard bootstrap icons. Content of plus will then be replaced by the content of minus whenever the class collapsed does not lie on your button (which is exactly whenever the tab is not collapsed).

This is the HTML code at the beginning:

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

The only downside to this is that you can not use the plus icon in a collapsed tab again without it changing to a minus, too. If you want that you could of course copy the class to a new one like this:

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

And changing the CSS at the start of my post to the new class instead and then using the new class in the HTML code of your accordion instead of just glyphicon-plus.

Answer 5

This is my css

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

This is my button

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

And this is my the whole accordion html with the above button

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

Somebody Answered it the same way but neither people voted him nor he ended well with the quote that it has downside. I don't know what downside he was talking about. But I thought instead of editing that one lets add a neat answer though I up voted him. I suggest there should not be need for javascript coding for this. Because it can easily be done with css and html so why to litter your page.?

Answer 6

I was able to accomplish this with a couple lines of html and css.

 a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator { display: none; }

 <span class="collapsedIndicator">+</span> <span class="expandedIndicator">-</span>

Simply put the span tags into your HTML where you want the plus or minus to be, and then add the css rule to your stylesheet. If using bootstrap 3 or earlier, you can use glyphicons instead of the plain text plus and minus I used. This seems like the simplest solution.

Answer 7

demo https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion-with-plus-minus-icon

 $(document).ready(function(){ // Add minus icon for collapse element which is open by default $(".collapse.show").each(function(){ $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus"); }); // Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function(){ $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus"); }).on('hide.bs.collapse', function(){ $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus"); }); });

 .bs-example{ margin: 20px; } .accordion .fa{ margin-right: 0.5rem; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> </style> <div class="bs-example"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button> </h2> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> </div> </div>

Answer 8

Adding a background color to the :active list will give you a differentiation you are looking for but if you really want a button, bootstrap uses glyphicons. This is what I did to mine and it looks good

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

Answer 9

Yes, just another answer but in my case it will work if you have or not have data-parent which help to archive just one open and all lefts is close.

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

Answer 10

Ok this need new answer because Twitter Bootstrap and jQuery change many things and you need automatization:

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

This nicely work with Twitter Bootstrap version 3.x and jQuery 1.10.3 and all rest above.