show all bootstrap accordion

Question

I'm trying to program a link for bootstraps accordion that will show all the accordion panels when clicked and then when clicked again all the panels hide.

I have it about 90% working, except the top panel is acting weird. When I click on the show all the very first time it will hide and the other menu's open up. When toggled back and forth though it starts to work as it should.

My jQuery looks like this

$('#accShow').on('click', function() {
    if($(this).text() == 'View All') {
        $(this).text('Hide All');
        $('.collapse').collapse('hide');
    } else {
        $(this).text('View All');
        $('.collapse').collapse('show');
    }
    return false;
});

and I have tried adding this, but it had no effect:

$('#collapseOne').collapse("show");

Related : http://stackoverflow.com/questions/15027535/bootstrap-collapse-force-expand-all — Milche Patern, Sep 11 '13 at 12:42

score 7 · Accepted Answer · edited May 23 '17 at 10:31

Took and modified from this answer :

$('#accShow').on('click', function() {
    if($(this).text() == 'View All') {
        $('.collapse:not(.in)').each(function (index) {
            $(this).collapse("toggle");
        });
        $(this).text('Hide All');
    } else {
        $(this).text('View All');
        $('.collapse.in').each(function (index) {
            $(this).collapse("toggle");
        });
    }
    return false;
});

score 0 · Answer 2 · answered Sep 09 '13 at 13:34

0

Add id to your button View all and add script :

jQuery(document).ready(function () {
    jQuery('#idButtonViewAll').on('click', function(e){
         jQuery('.accordion-body').each(function(){
               jquery(this).addClass("in");
         });
    });
});

answered Sep 09 '13 at 13:34

Laustralien

95
10

I already have an id on my viewAll button...and how would adding the class in help? I'm looking to open all the separate panels not add a class.. – zazvorniki Sep 09 '13 at 14:20
To get your panels open at loading, they need the class 'in' ! – Laustralien Sep 11 '13 at 09:25
I'm not looking to get all my panels at loading, I am trying to get everything to show when you click a button. I already have this happening using jQuery, except the first panel closes instead of opens like the rest of the panels. I have done copious amounts of research and almost every article says that the method I posted above is preferred over the in class. – zazvorniki Sep 11 '13 at 12:36

show all bootstrap accordion

2 Answers2

Linked