Bootstrap 5 accordion with an inline checkbox?-CodePudding

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  id="accordionExample">
    <div >
        <div  id="heading6">
              <input type="checkbox"  id="program6" value="6" checked>
              <a  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;"  aria-labelledby="heading6" data-bs-parent="#accordionExample">
         <div >
             <input type="checkbox"  id="package243" value="program_data/6/packages/1646756076.zip" checked="">
             <label  for="package243">1646756076.zip</label>
         </div>
         <div >
             <input type="checkbox"  id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
             <label  for="scriptundefined">MEER_munger.py</label>
         </div>
    </div>
    <div >
        <div  id="heading9">
             <input type="checkbox"  id="program9" value="9">
             <a  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;"  aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
    </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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  id="accordionExample">
  <div >
    <div  id="heading6">
      <input type="checkbox"  id="program6" value="6" checked>
      <a  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;"  aria-labelledby="heading6" data-bs-parent="#accordionExample">
    <div >
      <input type="checkbox"  id="package243" value="program_data/6/packages/1646756076.zip" checked="">
      <label  for="package243">1646756076.zip</label>
    </div>
    <div >
      <input type="checkbox"  id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
      <label  for="scriptundefined">MEER_munger.py</label>
    </div>
  </div>
  <div >
    <div  id="heading9">
      <input type="checkbox"  id="program9" value="9">
      <a  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;"  aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
  </div>
</div>