Keep bootstrap accordion open on click

Question

We have the following in my AngularJS view. The issue is that when a user clicks in the textbox a second time, it closes the accordion, I want it to stay open until a different accordion is opened.

<div class="col-xs-7 panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="" data-target="#collapseOne" class="collapsed">
                    <input class="form-control" type="text" ng-model="vm.Whatever" placeholder="Whatever">
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                lorem ipsum....
            </div>
        </div>
    </div>
</div>

Is there a simple way to do this?

To Clear up confusion, I've changed it to the following

<accordion class="col-xs-7 panel-group" id="accordion">
    <accordion-group>
        <accordion-heading>
            <input class="form-control" type="text" ng-model="vm.Whatever" placeholder="Whatever">
        </accordion-heading>
        <div>
            lorem ipsum....
        </div>
    </accordion-group>
</accordion>

So I hopefully don't get a bunch of 'do this in jquery' responses — CaffGeek, Mar 19 '15 at 20:04
I don't get it... Is it the angular-ui bootstrap's accordion? Cause you don't seem to be using it — New Dev, Mar 19 '15 at 20:05
How are you instantiating the accordion without using jQuery? You have no custom directives. — Tahsis Claus, Mar 19 '15 at 20:12

New Dev · Accepted Answer · 2015-03-19T21:16:31.240

2

Using the accordion* directive from angular-ui, you can only prevent the toggle if you set is-disabled (here's the src). But probably an easier approach is to force the is-open variable to be true on click:

<accordion-group is-open="openA" ng-click="openA = true">
  <accordion-heading>
    whatever
  </accordion-heading>

</accordion-group>

<accordion-group is-open="openB" ng-click="openB = true">
  <accordion-heading>
    whatever
  </accordion-heading>

</accordion-group>

edited Mar 19 '15 at 21:16

answered Mar 19 '15 at 20:24

New Dev

48,427
12
87
129

That's having no effect here as well...it's still opening and closing on each click. – CaffGeek Mar 19 '15 at 20:44
I think the issue is we have 0.10.0 – CaffGeek Mar 19 '15 at 21:00
1

@CaffGeek, right - 0.10.0 doesn't have `is-disabled`. I edited the question with what is probably even a better approach – New Dev Mar 19 '15 at 21:17
@CaffGeek, did this address your question? – New Dev Mar 23 '15 at 03:15
Possibly, I'll be back at the office Monday to try it out – CaffGeek Mar 23 '15 at 03:29

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

This may be a duplicate of How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

<accordion-group ng-click="$event.stopPropagation()">

edited May 23 '17 at 11:43

Community

1
1

answered Mar 19 '15 at 20:29

Brent Washburne

12,904
4
60
82

Why would you post a duplicate answer instead of voting to close the question as duplicate? – New Dev Mar 19 '15 at 20:33
That change is having no effect. – CaffGeek Mar 19 '15 at 20:37
Maybe place the `ng-click` on the `` element? – Brent Washburne Mar 19 '15 at 21:01

score 0 · Answer 3 · answered May 25 '19 at 17:05

can implements many div of id #accordion{{$i}} each accordion only having 1 child that referring 1 its parent

    <div class=""
         id="accordion{{$i}}">

        <h3 class="" data-toggle="collapse"
            data-target="#collapse{{$strength->id}}"
            aria-expanded="true"
            aria-controls="collapse{{$strength->id}}" class="mb-0">
            Hai Im the clickable
        </h3>

        <div id="collapse{{$i}}"
             class="collapse"
             aria-labelledby="heading{{$i}}"
             data-parent="#accordion{{$i}}">
            <p>Hai Im the collapsible content</p>
        </div>
    </div>

Keep bootstrap accordion open on click

3 Answers3