Hide DIV when both switches are not checked - html

Question

I have two collapsible switch buttons that each one collide on/off one checkbox in my form. Above the checkboxes I have a little paragraph, and I want this paragraph to hide (collide) only when both checkboxes are hidden (or main switches are off), and I don't know how to make it work. I'm developing this frontend with Bootstrap.
<label class="switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
<div class="slider round">
</div>
</label>
<label class="switch mt-2">
<input class="fo rm-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
<div class="slider round">
</div>
</label>
<div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show">
<label class="form-label">MORE OPTIONSs</label>
<p>Explanation of the next options.</p>
</div>
<div id="dsForm" aria-expanded="false" class="collapse show">
<div class="form-check mt-2 mb-2">
<input class="form-check-input" type="checkbox" value="" id="all-documents">
<label class="form-check-label" for="allDocuments">
Checkbox 1 label
</label>
</div>
</div>
<div id="emailForm" aria-expanded="false" class="collapse">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="all-emails">
<label class="form-check-label" for="allEmails">
Checkbox 2 label
</label>
</div>
</div>

Answer 1

We can write a little JavaScript based on Bootstrap's Collapse component to achieve your goal.
// Create a collapsible from the element that should
// be shown/collapsed depending on two checkboxes.
const collapsible = new bootstrap.Collapse('#hideWhenBothSwitchOff', {
toggle: false,
});
// The checkboxes to check.
const checkboxes = [
document.getElementById('ds-activate'),
document.getElementById('email-activate'),
];
// Attach event listener to each checkbox, so we know when they
// are checked or unchecked.
checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', () => {
// If at least one checkbox is checked, show the collapsible,
// otherwise hide it.
const operation = checkboxes.some(({ checked }) => checked)
? 'show'
: 'hide';
collapsible[operation]();
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<label class="switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
<div class="slider round">
</div>
</label>
<label class="switch mt-2">
<input class="fo rm-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
<div class="slider round">
</div>
</label>
<div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show">
<label class="form-label">MORE OPTIONSs</label>
<p>Explanation of the next options.</p>
</div>
<div id="dsForm" aria-expanded="false" class="collapse show">
<div class="form-check mt-2 mb-2">
<input class="form-check-input" type="checkbox" value="" id="all-documents">
<label class="form-check-label" for="allDocuments">
Checkbox 1 label
</label>
</div>
</div>
<div id="emailForm" aria-expanded="false" class="collapse">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="all-emails">
<label class="form-check-label" for="allEmails">
Checkbox 2 label
</label>
</div>
</div>