I am currently working on implementing collapsible buttons into my web application, which is created using Google Apps Script (GAS).
The buttons are functioning correctly and toggle the content visibility as intended through jQuery. I have inserted the necessary code snippets in both the head and body sections of my web-app.
However, the default styling of the bootstrap buttons does not align with the overall look of my web application. Therefore, I aim to customize them according to my preferences.
In order to achieve this customization, I need to thoroughly understand and analyze the specific classes within Bootstrap that need to be overridden.
Here is an example of the button:
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
This button targets the following 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 wish to change the background color when the button is active or clicked.
I attempted to inspect the page and apply the following CSS style declaration:
.collapse show{
background-color: red;
}
However, this did not produce the desired effect, and I am uncertain if it is the correct approach to achieving the desired customization.
For reference, here are the links included in my code:
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
and in the body section:
<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/popper.js@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>