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-03 11:19:46Z

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 3, 2015 at 11:19

answered Apr 17, 2014 at 14:38

klode

11.1k6 gold badges38 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Alpan Karaca Over a year ago

But this way it is closed, if you click on panel-body

Balazs Nemeth Over a year ago

The isopen is not necessary here, the solution with the enclosing div is perfect without the custom isopen variable.

Archimedes Trajano Over a year ago

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 plnkr.co/edit/0aiIabxogB1oKIhbjHXa

klode Over a year ago

@ArchimedesTrajano move the ng-click attribute to the accordion-group element. see this plunkr plnkr.co/edit/IshCNSF6jjWBt9BCukTz?p=preview

Archimedes Trajano Over a year ago

you need to change the plnkr slightly so there's no space in the glypicons-chevron-down

|

Sean · Accepted Answer · 2016-07-15 13:39:24Z

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, 2016 at 13:39

Sean

15.2k17 gold badges83 silver badges139 bronze badges

2 Comments

Berbare Over a year ago

That's exactly what I needed, and very simple. Thanks! (and I'm using <uib-accordion-heading>, though a basic one)

Nikson Over a year ago

@Sean can you please help me to solve this issue stackoverflow.com/questions/50073157/…

Archimedes Trajano · Accepted Answer · 2015-09-03 01:58:56Z

10

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

answered Sep 3, 2015 at 1:58

Archimedes Trajano

43.2k29 gold badges222 silver badges372 bronze badges

2 Comments

Alexandre D. Over a year ago

This is the right thing to do. It works like a charm !

Nikson Over a year ago

@AlexandreD. can you please help me to solve this issue stackoverflow.com/questions/50073157/…

Collectives™ on Stack Overflow

Angularjs accordion ng-click on panel-header

3 Answers 3

12 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related