My question is how can I change accordion background color when it's active in react bootstrap? Thank you!

class App extends React.Component {
  render() {
    return (
      <div>
         <Accordion>
           <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
              All movies
              </Accordion.Toggle>
            </Card.Header>
            [....]
      </div>
    );
  }
}

My question is how can I change accordion background color when it's active in react bootstrap? Thank you!

class App extends React.Component {
  render() {
    return (
      <div>
         <Accordion>
           <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
              All movies
              </Accordion.Toggle>
            </Card.Header>
            [....]
      </div>
    );
  }
}

• javascript
• reactjs
• react-bootstrap

• Do it the CSS way: Find what class is added by bootstrap when the accordion item is open, and style the element using plain CSS. Another way to do it using React, would be to save the active item in state and conditionally add a style prop to reflect the same. – Dane Commented Sep 29, 2020 at 5:19
• @Dane Ok i have added a css class .selected but how do i save the state? Thanks btw :) – Johnny Biy Commented Sep 29, 2020 at 5:27

3 Answers 3

For react-bootstrap 5, just override CSS:

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #29008a;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

Change color, background-color to your choice.

I think what you want is to apply it to the Card.Header since it is configured to occupy the entire width of the accordion. You can leverage eventKey to track the active accordion item which you can store in a state

state = {
  activeEventKey: "0"
};

activeColor = "#dddddd";

<Card.Header
  {...(this.state.activeEventKey === "0" && {
    style: { backgroundColor: this.activeColor }
  })}
>
  <Accordion.Toggle
    as={Button}
    variant="link"
    eventKey="0"
    onClick={() => this.setState({ activeEventKey: "0" })}
  >
    Click me!
  </Accordion.Toggle>
</Card.Header>

Example accordion is taken from: https://react-bootstrap.github.io/ponents/accordion/

You will have to keep track of which accordion key is open by using useState() hook so you can dynamically set it. After that, you will have to check the current opened key against each card and if it matched the key of the card, you will change the style dynamically by setting backgroundColor. A working example would be:

import React, { useState } from "react";
import "./App.css";

import { Accordion, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [currentActiveKey, setCurrentActiveKey] = useState(null);

  const toggleActiveKey = (key) => {
    setCurrentActiveKey(currentActiveKey === key ? null : key);
  };

  return (
    <div className="App">
      <Accordion>
        <Card
          style={currentActiveKey === "0" ? { backgroundColor: "red" } : null}
        >
          <Card.Header>
            <Accordion.Toggle
              onClick={() => {
                toggleActiveKey("0");
              }}
              variant="link"
              eventKey="0"
            >
              All Movies
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <div className="panel-body">Body content for panel 1</div>
          </Accordion.Collapse>
        </Card>

        <Card
          style={currentActiveKey === "1" ? { backgroundColor: "red" } : null}
        >
          <Card.Header>
            <Accordion.Toggle
              onClick={() => {
                toggleActiveKey("1");
              }}
              variant="link"
              eventKey="1"
            >
              All Movies 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <div className="panel-body">Body content for panel 2</div>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

export default App;