CODEWITHSUNDEEP
twitter-bootstrapangularjs
Yonoss
Yonoss

Reputation: 1688

Bootstrap UI - How can I change the accordion header icon, on tab expanded?

How can I change the accordion header icon, on tab expanded ?

Accordion plunke URL is : http://plnkr.co/edit/7HMhoHk9AWyBAHALgD0P?p=preview

 <accordion-group>
        <accordion-heading>
            I can have markup, too! <i class="icon-check"></i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
  </accordion>

So basically I want to change the icon-check class to let's say icon-uncheck, when the tab is expanded

Upvotes: 2

Views: 13514

Answers (3)

Markus K&#246;sel
Markus K&#246;sel

Reputation: 753

This should do what you want..

  <accordion-group is-open="$parent.isOpen">
    <accordion-heading>
        I can have markup, too! 
        <i ng-class="{'icon-minus':isOpen,'icon-plus':!isOpen}"></i>
    </accordion-heading>
    This is just some content to illustrate fancy headings.
  </accordion-group>

Here's a working plunk: http://plnkr.co/edit/kxKVsqHa1a64RvOUbVcM?p=preview

UPDATE

The above code is not properly working. It collapses/expands all groups in the accordion at once.

Have a look at this Plunker for a better solution: http://plnkr.co/edit/RQKAoY04eVj1ysIikRxU?p=preview

Upvotes: 5

Yogesh
Yogesh

Reputation: 21

For change icon 

<accordion close-others="true" is-open="group.open">
    <accordion-group ng-repeat="group in groups">
        <accordion-heading>
            <i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
           [{{$index + 1}}] {{group.title}}
        </accordion-heading>
        {{group.content}}
     </accordion-group>

Upvotes: 2

trevoirwilliams
trevoirwilliams

Reputation: 478

You can maybe try adding a script to your page that targets the accordion-heading class to change the class attribute to your desired icon. maybe you can refer to these posts for some insight into how to do this.

Twitter Bootstrap accordion icon doesnt change

Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

Upvotes: 0

Related Questions