Angular UI Bootstrap Accordion Adding a Class to header

Question

I have the following accordion which is working fine

<accordion-group is-open="open.first">
        <accordion-heading>
          My Title
        </accordion-heading>
</accordion-group>

The "Accordion-heading" directive translates into something like

    <h4 class="panel-title">
    <a class="accordion-toggle" 
accordion-transclude="heading" ng-click="toggleOpen()" href="">
My Title
    </h4>

What I want is when someone clicks on this accordion option/title is to add to toggle a class on the h4 attribute. In jquery I would do it like this

$('.panel-heading .panel-title').on('click', function () {   
    $(this).toggleClass('actives'); 
 });

I think I have to do it as a directive, but not quite sure how ?

Using the developertools "f12" i see that the panel has an "in" class added when it is open. — Jacob Brewer
From there you can do something like: $(this).addClass('someClass'); $(mySelector).trigger('cssClassChanged') $(otherSelector).bind('cssClassChanged', data, function(){ do stuff }); — Jacob Brewer
thats the content panel, the heading panel gets nothing added when toggled — StevieB
When I try adding it is as pure jquery it doesnt seem to trigger I think due to page loads and view loading different times etc I think it needs to be added via a directive — StevieB
modified copy from docs.angularjs.org/guide/animations myModule.directive('my-directive', ['$animate', function($animate) { return function(scope, element, attrs) { element.on('click', function() { // find all elements with 'in' class inside }); }; }]); — Jacob Brewer

Robert Henderson Robert Henderson · Accepted Answer · 2015-07-16T19:37:13

Assuming you are using ng-repeat on your <accordion-group> directive, you can do something like this:

<accordion-group ng-repeat="group in groups" ng-init="group.isOpen = false" ng-class="{'open': group.isOpen}" is-open="group.isOpen">

This initializes a new $scope variable in ng-init called isOpen that is attached to the individual group you are repeating over (group.isOpen). In my example above, I've made it false so that all accordion groups are closed on load, and then assigning that variable to is-open. When you click or "open" one of the accordion groups, the directive will automatically change group.isOpen to true. This will then allow the ng-class expression to evaluate true as well and add the class "open" to the panel-heading in the DOM.

Angular UI Bootstrap Accordion Adding a Class to header

1 Answers