Having trouble customizing Accordion

[kosz]

So the issues i'm having come from the (reasonable) need of wanting to customize the Accordion header.

Angular-ui-bootstrap seems to wrap the bootstrap divs, and restrict access to do simple reasonable things.

The content of the accordion-heading seems to be forced into an H4, and a onclick event is added that ONLY and ALWAYS toggles the open state of the panel.

What I'd like to achieve is :

• have a table or a set of divs/spans in the accordion-heading instead of the H4
• have buttons in the accordion-heading that have their own onclick events and do not trigger the toggling of the accordion pane ( as an example, i'd like to put a Remove button on the accordion pane, and when the Remove button is clicked, I remove the pane instead of toggling it )

So far I've been unsuccessful in achieving this behaviour with Angular-ui-bootstrap, even though this behaviour should be quite reasonable and straight forward to implement.

Am I missing something here, or is this a design flaw in the Accordion directive ?

[kosz]

Right, I've just discovered the tpls file, so I'm guessing I can somehow customize these templates. It would have been quite weird otherwise to be constrained to a h4 tag only for your content header.I'll give it a go today after work

[pkozlowski-opensource]

@kosz yes, we've got default templates based on the default bootstrap markup but those are fully customisable: https://github.com/angular-ui/bootstrap#customize-templates

[kosz]

hey Pawel, thanks for your answer. I have been following the instructions in the link which you provided and I was able to take full control of the look of the template, however, I cannot call toggleOpen() from within my code. I have opened a ticket about this here : #2291 , maybe when you have a second, you can advise on that.

Anticipated thanks