I'm currently working on implementing an accordion feature. I found inspiration from this component here on fiddle which utilizes bootstrap 4. While attempting to troubleshoot a bug in the SO forum, I noticed that on my page, the component seems to "blink" momentarily just before fully expanding. The page is hosted on Moodle and unfortunately, as an admin with frontend editing access only, I can't delve into server-side configurations. My suspicion is that there might be conflicts within the existing stylesheets of this specific page. Any insights or help regarding my code would be greatly appreciated.
.spacer {
height: 1em;
}
#competence {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#competence td, #competence th {
border: 1px solid #ddd;
padding: 8px;
}
#competence tr:nth-child(even){background-color: #f2f2f2;}
#competence tr:hover {background-color: #ddd;}
#competence th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<b>
A table
</b>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div dir="ltr">
<table id="competence">
<colgroup>
<col width="332">
<col width="129">
<col width="125">
</colgroup>
<tbody style="border-color:black;">
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2" rowspan="3">
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
[...]
t;
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2">
<p dir="ltr">Some text</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>Any ideas on what could be causing this behavior?