I'm just starting out with HTML/CSS and as I follow a few tutorials, I've encountered an issue when attempting to implement an accordion example from https://getbootstrap.com/docs/4.0/components/collapse/. It seems like the problem stems from the CSS file. The .button class seems to be conflicting with the HTML code, causing this issue.
Here's the snippet of my HTML code:
<section class="our-news section-margin">
<div class="container">
<div class="one-title" data-dsn-animate="up">
<div class="title-sub-container">
<p class="title-sub">Frequently Asked Questions</p>
</div>
<h2 class="title-main">What you need to know</h2>
</div>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</section>
The culprit might be in the CSS styling:
.button,
button:not([data-filter]):not(.mfp-arrow),
input[type="button"],
input[type="reset"],
input[type="submit"] {
position: relative;
width: auto;
color: #fff;
background-color: #090909;
-moz-appearance: none;
border: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
font-size: 14px;
font-weight: 500;
letter-spacing: 3px;
line-height: 14px;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
padding: 20px 41px;
margin-top: 0;
-webkit-transition: background 0.3s, color 0.3s;
-o-transition: background 0.3s, color 0.3s;
transition: background 0.3s, color 0.3s;
overflow: hidden;
}
.button:before,
button:not([data-filter]):not(.mfp-arrow):before,
input[type="button"]:before,
input[type="reset"]:before,
input[type="submit"]:before {
content: "";
background-color: rgba(54, 54, 54, 0.2);
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 0;
}
Trying to debug, what do you think could be causing the issue?