I've been struggling to figure out how to prevent a collapsible panel from opening or showing if a specific value is null. Despite multiple attempts, I haven't had any success.
HTML
<a href="#" data-bs-toggle="collapse" data-bs-target="#infoBox" aria-expanded="false" aria-controls="infoBox"></i>
<div class="collapse m-3" id="infoBox">some ifos ...</div>
First attempt:
var someVal;
var infoBox = document.getElementById('infoBox')
infoBox.addEventListener('show.bs.collapse', function () {
// console.log(e.target);
if (someVal == null) return;
})
Second attempt:
var someVal;
var infoBox = document.getElementById('infoBox');
var bsCollapse = new bootstrap.Collapse(infoBox, {
show: false,
dispose: true
})
infoBox.addEventListener('show.bs.collapse', function (e) {
// console.log(e.target);
if (someVal == null) return bsCollapse;
})
Unfortunately, neither of these methods seem to be effective.