Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accordian/Card Bootstrap Color Options

See original GitHub issue

I think it would be great if there was an option on the accordion to have a certain type. For example:

<ngb-accordion [closeOthers]="true" type="success">
</ngb-accordion>

– OR –

<ngb-accordion [closeOthers]="true">
        <ngb-panel type="warning" title="Collapsible Group Item #1" [open]="true"></ngb-panel>
        <ngb-panel type="success" title="Collapsible Group Item #2"></ngb-panel>
        <ngb-panel type="info" title="Collapsible Group Item #3"></ngb-panel>
        <ngb-panel type="primary" title="Collapsible Group Item #4"></ngb-panel>
        <ngb-panel type="default" title="Collapsible Group Item #5"></ngb-panel>
</ngb-accordion>

This way we can easily utilize the different colors that bootstrap offers (with cards and panels)

Here is a plunker, started from another discussion (Issue #404) and adapted to this request (except it only shows the ngb-accordion example): http://plnkr.co/edit/2IDH6VDXQsjDhk8l0lHj?p=preview

Issue Analytics

State:
Created 7 years ago
Comments:7 (6 by maintainers)

Top GitHub Comments

1reaction

pkozlowski-opensourcecommented, Jul 12, 2016

If it is open, I will take it.

It is all yours 😃

1reaction

pkozlowski-opensourcecommented, Jul 10, 2016

Why not. We could even have both options (that is - a “global” one on the accordion level and panel having an ability to override this).

Should be an easy feature to implement once #403 lands

Top Results From Across the Web

Bootstrap Accordion Tutorial With Programming Examples

Accordion With Background Colors · The .bg-primary class: This class is used to add a blue color to the component. · The .bg-secondary...

Accordion · Bootstrap v5.0

Build vertically collapsing accordions in combination with our Collapse JavaScript ... Add .accordion-flush to remove the default background-color , some ...

How do I change the background-color of an accordion tab in ...

You are probably changing the background-color of the anchor tag if only the text's background is changing, instead, use the following CSS ...

Bootstrap Accordion - examples & tutorial

Responsive accordion built with the latest Bootstrap 5. ... Add .accordion-flush to remove the default background-color , some borders, and some rounded ...

20 Best Bootstrap Accordion Examples 2022 - Colorlib

Also, when the accordion opens, it CHANGES COLOR, and the icon turns purple for a more dynamic feel. More info / Download DemoGet...