The Collapse plugin shows and hides a block. A trigger with data-bs-toggle="collapse" names its target in data-bs-target (or an <a>'s href); a class selector toggles several targets at once. Keep aria-expanded and aria-controls on the trigger. The accordion beside it is explained in Accordion.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel=stylesheet>
<div class="p-3 d-flex gap-3 align-items-start">
<div style="width: 11rem"><button class="btn btn-primary mb-2" type="button"
data-bs-toggle="collapse" data-bs-target="#specs" aria-expanded="true"
aria-controls="specs">Specifications</button><div class="collapse show" id="specs">
<div class="card card-body">Weight 1.2 kg</div></div></div>
<div class="accordion flex-grow-1" id="faq">
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#q1" aria-expanded="true"
aria-controls="q1">Is shipping free?</button></h2>
<div id="q1" class="accordion-collapse collapse show">
<div class="accordion-body">Yes, on orders over $50.</div></div>
</div>
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#q2" aria-expanded="false"
aria-controls="q2">Can I return items?</button></h2>
<div id="q2" class="accordion-collapse collapse">
<div class="accordion-body">Within 30 days.</div></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
From code, bootstrap.Collapse.getOrCreateInstance('#specs').hide() does what the button does.