Bootstrap collapse not collapsing back

Question

I have a page where I have included the (Twitter) bootstrap. On this page I have a prefectly working accordion and within that accordion I have a collapsable div. See the code below:

<div class="accordion" id="checkListAccordion">
<div ng-repeat="item in items" class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#checkListAccordion" href="#collapse{{item.$$hashKey}}">{{item.name}}</a>     
    </div>
    <div id="collapse{{item.$$hashKey}}" class="accordion-body collapse">
        <div class="accordion-inner">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="badges span12">
                        <span class="badge badge-info" data-toggle="collapse" data-target=".info{{item.$$hashKey}}"><i class="icon-info-sign icon-white"></i></span>
                        <div class="info{{item.$$hashKey}} collapse in">
                            {{item.info}}
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                       some text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now, when I click the info badge, the div with the corresponding class is folding open. But it never folds back when I click it again. Only when I wrap in in a navbar and navbar-inner, it folds back....but of course, I don't want that.

Any help on this?

when i try your code with hardcoded class names it seems to work: see http://bootply.com/62667. Are you sure your `{{item.$$hashKey}}` is set right? — Bass Jobsen, May 30 '13 at 21:29
Weird...it turns out that when I remove the surrounding repeater (the accordion items are created in a ng-repeat) everything works fine. Even when I hardcode multiple items. I updated the html to illustrate more. — Bas Slagter, May 31 '13 at 12:13
ng-repeat has a different scope, see also: http://stackoverflow.com/questions/16854463/jquery-addclass-doesnt-work-in-twitter-bootstrap-carousel-which-using-ng-repeat you should use a ng-click event for add / remove the .in class. — Bass Jobsen, May 31 '13 at 12:47
@BassJobsen Thanks for your help. Unfortunately I don't see the problem (I'm kind of new to Angular). Can you explain it to me? — Bas Slagter, May 31 '13 at 12:56
I will try. Twitter bootstrap use jQuery for DOM manipulation (adds or removes the .in class). Angular creates new DOM elements (your accordion items). jQuery don't know this elements cause they are create in an other scope (Angular). This video http://www.youtube.com/watch?v=bk-CC61zMZk helps may be. — Bass Jobsen, May 31 '13 at 13:07
Or better read this: http://thenittygritty.co/angularjs-pitfalls-using-scopes — Bass Jobsen, May 31 '13 at 13:12
May be i was wrong. See this question: http://stackoverflow.com/questions/16838612/angularjs-set-initial-active-class. Here jQuery / bootstrap handles the class changes in a ng-repeat loop. — Bass Jobsen, May 31 '13 at 13:24
But in this case the problem is not the class changed. The classnames are just there to uniquely identify the element (should be id's). — Bas Slagter, May 31 '13 at 14:14
see also http://twitter.github.io/bootstrap/javascript.html#collapse bootstrap handles the folding back by removing the .in class — Bass Jobsen, May 31 '13 at 22:56

score 1 · Accepted Answer · edited May 23 '17 at 12:18

1

When i add a controler to your code all seems to work as expected:

angular.module('plunker',[]);
function AccordionDemoCtrl($scope) {
  $scope.oneAtATime = true;

  $scope.items = [
    {
      name: "Dynamic Group Header - 1",
      info: "Dynamic Group Body - 1"
    },
    {
      name: "Dynamic Group Header - 2",
      info: "Dynamic Group Body - 2"
    }
  ];


}

See also: http://plnkr.co/nX4kvMThA0bYwcbXZS7t May be there will be a problem with the versions you use? I used jQuery 1.9.1, Twitter Bootstrap 2.3.1 and angularJS 1.0.7 (see: Angular JS Bootstrap Accordian Example).

btw have you consider to use UI Bootstrap (http://angular-ui.github.io/bootstrap/) see: http://plnkr.co/u7l6nrkPZM8ZJtA08RNP (thanks to winkerVSbecks who answered Howto set template variables in Angular UI Bootstrap? (accordion))

edited May 23 '17 at 12:18

Community

1
1

answered Jun 01 '13 at 22:40

Bass Jobsen

47,890
16
139
218

Thanks for your help. It turns out that some of my own CSS was fooling me. The collapsable div was position on top of the toggle button when it was opened. Therefor I could no longer click the button to slide the div back in. That makes sense, doesn't it. My bad. – Bas Slagter Jun 02 '13 at 10:37
nice it works now. I learnt a lot about angularJS and UI Bootstrap which was nice too:) – Bass Jobsen Jun 02 '13 at 11:00

Bootstrap collapse not collapsing back

1 Answers1