So im currently porting my project from jQuery to AngularJS, I have the following code in jQuery

jQuery Code

$(document).ready(function()
{
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#Session" ).accordion({
      icons: icons
    });
}); 

I dont find any icons option in AngularUI. Is there any workaround to add header images in AngularUI accordion? Tried to used font awesome for icons

<accordion-group heading="My Current Sessions" class="icon-book">
      <div>Content Goes here</div>
</accordion-group>

The above code has icon and heading on adjacent lines, and not on same line.

So im currently porting my project from jQuery to AngularJS, I have the following code in jQuery

jQuery Code

$(document).ready(function()
{
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#Session" ).accordion({
      icons: icons
    });
}); 

I dont find any icons option in AngularUI. Is there any workaround to add header images in AngularUI accordion? Tried to used font awesome for icons

<accordion-group heading="My Current Sessions" class="icon-book">
      <div>Content Goes here</div>
</accordion-group>

The above code has icon and heading on adjacent lines, and not on same line.

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Apr 24, 2013 at 7:51 de-buggedde-bugged 93344 gold badges1414 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 14

If you are using the accordion directive from http://angular-ui.github.io/bootstrap/ and want to have custom HTML in your accordion heading you can use the <accordion-heading> element inside the <accordion-group> (instead of relaying on the heading attribute).

Here is an example:

<accordion>
    <accordion-group>
      <accordion-heading>
        Put any HTML <strong>here</strong><i class="icon-book"></i>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

And the working plunk: http://plnkr.co/edit/E4QtpTYpHkMmcZhUPZsK?p=preview

To emulate jquery-ui behavior and have the icon change based on state, you can also use the is-open attribute in accordion-group.

Here an example which works for me

<accordion close-others="false">

  <accordion-group is-open="section1.isOpen">
    <accordion-heading>
      <i ng-class="{true : 'icon-chevron-down', false : 'icon-chevron-right'}[!!section1.isOpen]"></i>
      <strong> SECTION 1</strong>
    </accordion-heading>
  CONTENT SECTION 1
  </accordion-group>
  <accordion-group is-open="section2.isOpen">
    <accordion-heading>
      <i ng-class="{true : 'icon-chevron-down', false : 'icon-chevron-right'}[!!section2.isOpen]"></i>
      <strong> SECTION 2</strong>
    </accordion-heading>
  CONTENT SECTION 2
  </accordion-group>

</accordion>

http://plnkr.co/edit/CODNWD7WiBHDfYHHuK7C?p=preview