0

I am trying to use a bootstrap collapsable panel into an angular component. From what i've seen the bootstrap approach is to use the id of the panel in order to collapse. This works as stand alone, however, when used into an angular component, the same id creates an undesired effect when toggle-ing between collapse and not collapse mode. ( always the first panel is collapsed/uncollapsed)

My next step was to create my custom collapse panel. This works and can be seen here plunker , but the collapse effect is not the same ( the plunker link displays in parallel my panel and the bootstrap panel).

My question is how can i use the bootstrap panel into my component or how can i change the css to have the same bootstrap effect on collapse/un-collapse. ?

 <custom-filter-accordion button-text="Expand / Collapse Non-BootStrap"></custom-filter-accordion>
Improve this question

1 Answer 1

Reset to default
2

You should definitely use Angular-ui's integration with bootstrap. For this specific purpose, they have a component called Collapse

They already have lot of directives that you could use with angular and should speed up your development time

Check this plunker

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I changed the code using your suggestions, but there is a slight glitch when the panel is collapsing . please check link . when the panel is collapsing at the end...there is a glitch that does not appear in the original bootstrap panel ...
Could you please post a plunker? That would help see the issue you are facing
here is the plunker . Please check the difference between custom-filter-accordion2 component and the third panel (bootstrap panel) when the collapse happens (especially at the end of the collapse transition)
Just move the uib-collapse directive one dom level higher. check this plunker Its much smooth here.
It is better now. I appreciate

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.