Bootstrap 5 accordion with an inline checkbox? - html

Question

I'm listing a bunch of programs that each have a bunch of files. Each program title is in an accordion header, which you can click to open the list of files.
I want to have a checkbox next to the program title, so you can select/unselect all files listed for each program.
The issue I'm running into is that I can't put the input inside of the button. See this: Bootstrap 5 collapse with Checkbox, stopPropagation() not working
And when I try putting the input outside of the button it won't stay on the same line as the accordion header. I've tried using d-inline and d-inline-block but couldn't get it to work.
Here is my HTML:
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="heading6">
<input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked>
<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
</div>
</div>
<div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
<div class="form-group form-check pl-4">
<input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
<label class="form-check-label" for="package243">1646756076.zip</label>
</div>
<div class="form-group form-check pl-4">
<input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
<label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading9">
<input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
</div>
</div>
<div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
</div>
</div>

Answer 1

To align items in one row you can use flex. Take a look at CSS section of Code Snippet.
.accordion--custom .accordion-header {
display: flex; /* make flex element */
align-items: center; /* aligning child items */
column-gap: 1rem; /* adding gap between items in row */
padding-left: 1rem;
}
/* small udjustments */
.accordion--custom .accordion-header .accordion-button {
padding-left: 0;
background: none;
}
.accordion--custom .accordion-button:not(.collapsed) {
box-shadow: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- "accordion--custom" - custom class for updating default accordion, like example -->
<div class="accordion accordion--custom" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="heading6">
<input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked>
<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
</div>
</div>
<div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
<div class="form-group form-check pl-4">
<input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
<label class="form-check-label" for="package243">1646756076.zip</label>
</div>
<div class="form-group form-check pl-4">
<input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
<label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading9">
<input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
</div>
</div>
<div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
</div>
</div>