How to read full bootstrap classes from collapsible buttons and customize it?

Question

I am trying to implement collapsible buttons on my web-app (built through GAS).

The buttons work properly and hide/show the content I want through jquery, I pasted the snippets needed in head and body. My problem is that the bootstrap buttons are styled a certain way and it doesn't fit my web-app global aspect, so I would like to be able to customize it at will.

But to do so, I need to find and read the specifics of each bootstrap classes in order to override it correctly.

So I have my button:

 <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-target
    </button>

Which targets the panel:

<div class="collapse" id="collapseExample">
    <div class="card card-body">
      <table>
        <tr>
          <td colspan="3">OK</td>
          <td>OK</td>
          <td colspan="3">OK</td>
        </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        </tr>
      </table>
    </div>
  </div>

Specifically I would like to be able to change the background when the button is active/clicked.

I tried inspecting the page but declaring the class

.collapse show{
    background-color: red;
  }

didn't change a thing, and anyways, I am not even sure that is the correct way to do it.

For info, these are the links pasted:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

and in the body:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

Answer 1

Styling buttons or elements in general you have two ways to do so:

1. Using the bootstrap classes. You can find the different bootstrap button classes here: https://getbootstrap.com/docs/5.1/components/buttons/
2. Adding your own class and styling.

Your solution wasn't totally wrong, you just forgot the dot: .collapse.show But this classes are not meant for the buttons but the collapsable element. To style the button I always create my own classes. You can also use the attributes in CSS like aria-expaned="true" or type="button" by adding it in []. Here you can find one example of stylings:

.custom-btn{
  color: red;
}

.custom-btn[aria-expanded="true"]{
  color: green;
}

.collapse.show{
  color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="custom-btn">
  Button with data-target
</button>
    
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Collapsed Text.
  </div>
</div>

I hope my anwer was helpful for your problem.