title: Trying to change the background color of the Bootstrap accordion title when opened
body: <p>I am working on this project and am trying to change the background color of the accordion when it is open. I like that it's flush when it's closed, but do not like the white background when it's open.</p>
  <p>I am also trying to change the way the arrows are situated, so that they are in a straighter line.</p>
  <p>This is what I have so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log(1)
  $(".accordion-button").click(function(){
    console.log(2)
    var dest = $(this).attr("data-bs-target");
    $(dest)[0].scrollIntoView();
  });
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
      opacity: 1;
      position: relative;
      overflow: scroll;
    }
  
  .accordion-title {
      font-variant-caps: titling-caps;
      position: absoulte;
  }
  
  .accordion-button {
      font-size: 20px;
      font-family: Red Rose;
      color: #FEB7EE !important;
  }
  
  .accordion-button:after {
      background-image: url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'&gt;&lt;path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/&gt;&lt;/svg&gt;") !important;
    }
  .accordion-header:collapse {background-color:black !important;}
  .accordion-button collapse {
      color: rgb(224, 16, 176);
    }
  h1 {
      font-family: Red Rose;
      color: #FEB7EE;
  }
  h2 {
      font-family: Raleway;
      color: #FEB7EE;
  }
  p {
      font-family: Raleway;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--html--&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"&gt;
  &lt;!--javascript--&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="eng"&gt;
  &lt;head&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Red+Rose&amp;display=swap" rel="stylesheet" /&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Raleway&amp;display=swap" rel="stylesheet" /&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;!--&lt;script type="module"&gt;
    import { Toast } from 'bootstrap.esm.min.js'
  
    Array.from(document.querySelectorAll('.toast'))
      .forEach(toastNode =&gt; new Toast(toastNode))
  &lt;/script&gt;--&gt;
  &lt;!-- Required meta tags --&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous"&gt;
  
  &lt;/head&gt;
  
   &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;
  
  &lt;!--bootstrap--&gt;
    
  &lt;title&gt;Raspberry Pilot&lt;/title&gt;
  &lt;!--intro--&gt;
  &lt;h1 class="display-1"&gt;Raspberry Pi-lot&lt;/h1&gt;
  &lt;h2 class="display-6"&gt;The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!&lt;/h1&gt;
  &lt;!--accordion--&gt;
  &lt;div class="accordion accordion-flush" id="accordionFlushExample"&gt;
  &lt;!--about--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushAbout"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"()&gt;
         About
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"&gt;
        &lt;div class="accordion-body about"&gt;&lt;p&gt;&lt;strong&gt;Raspberry Pi is a&lt;/strong&gt; fully featured, low cost, tiny Linux computer that is an easy way to learn programming and computing.&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--ingredients--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushIngredients"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"&gt;
          What You'll Need
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"&gt;
        &lt;div class="accordion-body"&gt;&lt;img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100"&gt;
          &lt;h3&gt;Raspberry Pi&lt;/h3&gt;
          &lt;p&gt;Go with models 3 and higher.&lt;/p&gt;
          &lt;img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100"&gt;
          &lt;h3&gt;HDMI Monitor&lt;/h3&gt;
          &lt;p&gt;An HDMI TV works too!&lt;/p&gt;
          &lt;img src="" alt="SD card icon" class="img-fluid" width="100" height="100"&gt;
          &lt;h3&gt;SD Card&lt;/h3&gt;
          &lt;p&gt;Aim for at least 8GB.&lt;/p&gt;
          &lt;img src="" class="img-fluid" alt="USB Mouse" width="100" height="100"&gt;
          &lt;h3&gt;USB Mouse&lt;/h3&gt;
          &lt;p&gt;You can switch to a wireless mouse later.&lt;/p&gt;
          &lt;img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100"&gt;
          &lt;h3&gt;USB Keyboard&lt;/h3&gt;
          &lt;p&gt;You can switch to a wireless keyboard later.&lt;/p&gt;
          &lt;img src="" class="img-fluid" alt="power supply icon" width="100" height="100"&gt;
          &lt;h3&gt;Power Supply&lt;/h3&gt;
          &lt;p&gt;Standard 5V USB C or Micro depending on the model.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--SetUp--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushSetUp"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"&gt;
         Set Up
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample"&gt;
        &lt;div class="accordion-body"&gt;&lt;h4&gt;Set up your SD card.&lt;/h4&gt;
          &lt;p&gt;Install NOOBS via Raspbian, then insert it into the Raspberry Pi. &lt;/p&gt;
          &lt;a href="url"&gt; Link to download NOOBS &lt;/a&gt;
          &lt;h4&gt;Plug everything in.&lt;/h4&gt;
          &lt;img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;"&gt;"
          &lt;p&gt;Make sure everything is plugged in before turning it on.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--options--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushOptions"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour"&gt;
         What Can You Do?
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample"&gt;
        &lt;div class="accordion-body"&gt;&lt;h4&gt;Set up your SD card.&lt;/h4&gt;
          &lt;p&gt;Install NOOBS via Raspbian, then insert it into the Raspberry Pi. &lt;/p&gt;
          &lt;a href="url"&gt; Link to download NOOBS &lt;/a&gt;
          &lt;h4&gt;Plug everything in.&lt;/h4&gt;
          &lt;img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;"&gt;"
          &lt;p&gt;Make sure everything is plugged in before turning it on.&lt;/p&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;!--python--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushPython"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive"&gt;
         Code with Python
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample"&gt;
        &lt;div class="accordion-body"&gt;&lt;h4&gt;Open Thonny&lt;/h4&gt;
          &lt;p&gt;Use Thonny to create new programs and systems on your Raspberry Pi &lt;/p&gt;
          &lt;a href="url"&gt; Link to see what you can do with Python &lt;/a&gt;
          &lt;h4&gt;Learn Python&lt;/h4&gt;
          &lt;img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;"&gt;"
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!--accessories--&gt;
  &lt;div class="accordion-item"&gt;
    &lt;h2 class="accordion-header" id="flushAccessories"&gt;
      &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix"&gt;
        Add Ons &amp; Accessories
      &lt;/button&gt;
    &lt;/h2&gt;
    &lt;div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample"&gt;
      &lt;div class="accordion-body"&gt;&lt;div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"&gt;
        &lt;div class="carousel-indicators"&gt;
          &lt;button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"&gt;&lt;/button&gt;
          &lt;button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"&gt;&lt;/button&gt;
          &lt;button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active" data-bs-interval="10000"&gt;
            &lt;img src="..." class="d-block w-100 img-fluid" alt="..."&gt;
            &lt;div class="carousel-caption d-none d-md-block"&gt;
              &lt;h5&gt;First slide label&lt;/h5&gt;
              &lt;p&gt;Some representative placeholder content for the first slide.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item" data-bs-interval="2000"&gt;
            &lt;img src="..." class="d-block w-100 img-fluid" alt="..."&gt;
            &lt;div class="carousel-caption d-none d-md-block"&gt;
              &lt;h5&gt;Second slide label&lt;/h5&gt;
              &lt;p&gt;Some representative placeholder content for the second slide.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img src="..." class="d-block w-100" alt="..."&gt;
            &lt;div class="carousel-caption d-none d-md-block"&gt;
              &lt;h5&gt;Third slide label&lt;/h5&gt;
              &lt;p&gt;Some representative placeholder content for the third slide.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"  data-bs-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="visually-hidden"&gt;Previous&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"  data-bs-slide="next"&gt;
          &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="visually-hidden"&gt;Next&lt;/span&gt;
        &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
   &lt;!--sensehat--&gt;
   &lt;div class="accordion-item" &gt;
     &lt;h2 class="accordion-header" id="flushSenseHat"&gt;
       &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven"&gt;
     SenseHat
        &lt;/button&gt;
    
      &lt;/h2&gt;
        &lt;div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample"&gt;
          &lt;img src="" class="img-fluid" alt="SenseHat Demo" width="200" height="250"&gt;
    &lt;pre&gt;
    &lt;code&gt;
    from sense_hat import SenseHat
    sense = SenseHat()
  
    # Define some colours
    g = (0, 255, 0) # Green
    b = (0, 0, 0) # Black
  
    # Set up where each colour will display
      creeper_pixels = [
        g, g, g, g, g, g, g, g,
        g, g, g, g, g, g, g, g,
        g, b, b, g, g, b, b, g,
        g, b, b, g, g, b, b, g,
        g, g, g, b, b, g, g, g,
        g, g, b, b, b, b, g, g,
        g, g, b, b, b, b, g, g,
        g, g, b, g, g, b, g, g
      ]
  
    # Display these colours on the LED matrix
      sense.set_pixels(creeper_pixels)
    &lt;/code&gt;
    &lt;/pre&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--projects--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushSenseHat"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight"&gt;
         SenseHat Projects
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight"&gt;
        &lt;div class="accordion-body"&gt;
          &lt;div class="card-group"&gt;
            &lt;div class="card"&gt;
              &lt;img src="..." class="card-img-top" alt="..."&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Project 1&lt;/h5&gt;
                &lt;p class="card-text"&gt;This will be a cool project idea.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card"&gt;
              &lt;img src="..." class="card-img-top" alt="..."&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Project 2&lt;/h5&gt;
                &lt;p class="card-text"&gt;Another cool project. &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card"&gt;
              &lt;img src="..." class="card-img-top" alt="..."&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Project 3&lt;/h5&gt;
                &lt;p class="card-text"&gt;Last cool project goes here.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--resources--&gt;
    &lt;div class="accordion-item"&gt;
      &lt;h2 class="accordion-header" id="flushResources"&gt;
        &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine"&gt;
         Raspberry Pi Resources
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine"&gt;
        &lt;div class="accordion-body"&gt;
          &lt;ul class="list-group list-group-flush"&gt;
            &lt;li class="list-group-item"&gt;Link&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Another Link&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Another another link&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Fourth link&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Last link&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--end tag--&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;link href="./stylesheet.css" rel="stylesheet"/&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>