Adding styles to Accordion

[nithyanv]

Hi,

I couldn't find any options to style Accordion. ngClass and ngStyle don't work. Am I missing something?

[OliPelz]

Hi!
I have just stumbled over the very same problem.

For example I want to add a custom class for styling whenever something is true e.g.

<accordion>
    <accordion-group 
    heading="{{phenoGroup.phenoName}} ({{phenoGroup.countPhenos}})" 
    ng-repeat="phenoGroup in exp.phenotypeGroups" 
    ng-class="{phenoListHighlighted : pheno.isHighlighted}">
    Hello,hidden world
</accordion-group>
</accordion>

this is not possible, ng-class is completely ignored here!

[RobJacobs]

@nithyanv @OliPelz You just need to wrap your accordion heading and content in another element (div) and use the ng-class on that. Something like so:

<accordion>
    <accordion-group ng-repeat="phenoGroup in exp.phenotypeGroups">
        <accordion-heading>
            <div ng-class="{phenoListHighlighted : pheno.isHighlighted}">
                {{phenoGroup.phenoName}} ({{phenoGroup.countPhenos}})
            </div>
        </accordion-heading>
        <div ng-class="{phenoListHighlighted : pheno.isHighlighted}">
            Hello,hidden world
        </div>
    </accordion-group>
</accordion>

Closing this for now.