Angularjs accordion ng-click on panel-header

Question

In AngularJS UI Bootstrap I want to activate isopen when panel-heading is clicked, but I couldn't find a way. In this version is activated only if you click the link.

Here's what I tried;

<accordion-group is-open="isopen">
    <accordion-heading ng-click="isopen=!isopen">
        I can have markup, too! 
        <i class="pull-right glyphicon" 
           ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
    </accordion-heading>
    This is just some content to illustrate fancy headings.
</accordion-group>

ng-click="isopen=!isopen"

This is the link I tried on Plunker

AngularJS UI Bootstrap

Thanks in advance..

klode · Accepted Answer · 2015-09-03T11:19:46.293

60

EDIT: A better solution is to move ng-click="isopen=!isopen" to the accordion-group element. This way the panel is opened/closed clicking anywhere on the panel-heading, including the edges.

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen" ng-click="isopen=!isopen">
        <accordion-heading >
           I can have markup, too! 
           <i class="pull-right glyphicon" 
              ng-class="{'glyphicon-   chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
           </i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
</accordion>

END EDIT

enclose the content of <accordion-heading> in a <div>

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen" >
        <accordion-heading ng-click="isopen=!isopen">
           <div>
            I can have markup, too! 
           <i class="pull-right glyphicon" 
              ng-class="{'glyphicon-   chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
           </i>
           </div>
       </accordion-heading>
       This is just some content to illustrate fancy headings.
   </accordion-group>
</accordion>

edited Sep 03 '15 at 11:19

answered Apr 17 '14 at 14:38

klode

10,821
5
34
49

But this way it is closed, if you click on panel-body – Alpan Karaca Apr 17 '14 at 14:53
The `isopen` is not necessary here, the solution with the enclosing `div` is perfect without the custom `isopen` variable. – Balazs Nemeth Aug 31 '15 at 15:22
2

There's a problem with this approach, it only makes the text area clickable but not the whole control so if you click near the edges it won't work. You can see from here http://plnkr.co/edit/0aiIabxogB1oKIhbjHXa – Archimedes Trajano Sep 03 '15 at 01:39
@ArchimedesTrajano move the `ng-click` attribute to the `accordion-group` element. see this plunkr http://plnkr.co/edit/IshCNSF6jjWBt9BCukTz?p=preview – klode Sep 03 '15 at 11:00
you need to change the plnkr slightly so there's no space in the glypicons-chevron-down – Archimedes Trajano Sep 03 '15 at 13:42
yours has one extra side effect though (which may be good on some cases but not all the time) it will toggle when you click on the expanded area. – Archimedes Trajano Sep 03 '15 at 13:43
@ArchimedesTrajano you are right ... did you find how to fix it? – klode Sep 03 '15 at 18:40
I had to change the template itself. My answer is below – Archimedes Trajano Sep 03 '15 at 21:24
@ArchimedesTrajano yeah, to change the directive template is the most accurate solution +1 – klode Sep 04 '15 at 00:44
ng-click on group restricts me type in the textbox tht is inside the acoordion – Sana Ahmed Feb 04 '18 at 09:07
@klode can you please help me to solve this issue https://stackoverflow.com/questions/50073157/data-api-response-not-binding-in-accordion-in-angular4 – Nikson Apr 28 '18 at 05:45
Using the div element did not work for me. Moving the ng-click event to the "accordion-group" tag DID work for me. :-) My custom function is always called regardless of what is clicked (title or glyph). – Gary Beardsley Aug 20 '19 at 19:45

score 14 · Answer 2 · answered Jul 15 '16 at 13:39

14

A very simple CSS-based solution:

    .panel-heading {
        padding: 0;
    }

    .panel-title a {
        display: block;
        padding: 10px 15px;
    }

I'm not using complex headings though - just the heading attribute as shown below, so I haven't tested it with the examples above.

<uib-accordion-group heading="Details" class="form-horizontal" is-open="true">

answered Jul 15 '16 at 13:39

Sean

14,359
13
74
124

That's exactly what I needed, and very simple. Thanks! (and I'm using ``, though a basic one) – Berbare Aug 26 '16 at 21:20
@Sean can you please help me to solve this issue https://stackoverflow.com/questions/50073157/data-api-response-not-binding-in-accordion-in-angular4 – Nikson Apr 28 '18 at 05:46

score 10 · Answer 3 · answered Sep 03 '15 at 01:58

What you need to do is change the accordion-group.html template such that it makes the header take the ng-click event.

<div class="panel {{panelClass || 'panel-default'}}">
  <div class="abc panel-heading" ng-keypress="toggleOpen($event)" ng-click="toggleOpen($event)" >
    <h4 class="panel-title">
      <a href tabindex="0" class="accordion-toggle" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
    </h4>
  </div>
  <div class="panel-collapse collapse" collapse="!isOpen">
      <div class="panel-body" ng-transclude></div>
  </div>
</div>

Then in your code specify it as the template-url for the accordion-group

<accordion-group heading="Dynamic Body Content" template-url="accordion-group.html">

Example: http://plnkr.co/edit/EXUgyNi8hrqQbh5maJUx?p=preview

@AlexandreD. can you please help me to solve this issue https://stackoverflow.com/questions/50073157/data-api-response-not-binding-in-accordion-in-angular4 — Nikson, Apr 28 '18 at 05:46

Angularjs accordion ng-click on panel-header

3 Answers3

Linked