I'm trying to implement an ordered list with a collapsible part inside the li elements. The idea is to have some basic information about a given context and by clicking on the link you get further information. The code is working but the numbering (1.) is not vertical-align with the content (Click to collapse) and I don't know how it can implement that properly. I'm not a css guru, so maybe you can help me.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ol >
    <li >
    <div >
        <div >
            <div >
                <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
                   href="#collapseExample">Click to collpase</a>
            </div>
            some information
        </div>
        <div >
            some more information
        </div>
        <span >42</span>
    </div>
    <div  id="collapseExample">
        <table >
            <thead>
            <tr>
                <th>#</th>
                <th>Foo, Bar</th>
                <th>Foobar</th>
                <th>FoobarBaz</th>
                <th>Baz</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ol>

CodePudding user response：

.grid-template {
  grid-template-areas: 'num toggle' 'collapse collapse';
  grid-template-columns: min-content auto;
}

.grid-template:before {
  grid-area: num;
}

.grid-template-toggle {
  grid-area: toggle;
}

.grid-template-collapse {
  grid-area: collapse;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ol >
    <li >
    <div >
        <div >
            <div >
                <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
                   href="#collapseExample">Click to collpase</a>
            </div>
            some information
        </div>
        <div >
            some more information
        </div>
        <span >42</span>
    </div>
    <div  id="collapseExample">
        <table >
            <thead>
            <tr>
              <th>#</th>
              <th>Foo, Bar</th>
              <th>Foobar</th>
              <th>FoobarBaz</th>
              <th>Baz</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some Text</td>
                    <td>More text text text</td>
                    <td>More text text text More text text text</td>
                    <td>More text text text More text text text</td>
                    <td>More text text text More text text text</td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ol>

CodePudding user response：

You can make your list-group-item grid (add .d-grid, .grid-template) and make custom grid areas to place inner content to special cells, see Code Snippet CSS part.

Also for shorts in CSS, toggle-button can be wrapped to .grid-template-toggle class and collapse block class list can be extended by .grid-template-collapse.

.grid-template {
  grid-template-areas: 'num toggle' 'collapse collapse';
  grid-template-columns: min-content 1fr;
}

.grid-template:before {
  grid-area: num;
}

.grid-template-toggle {
  grid-area: toggle;
}

.grid-template-collapse {
  grid-area: collapse;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<ol >
  <li >
    <div >
      <div >
        <div >
          <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse" href="#collapseExample">Click to collpase</a>
        </div>
        some information
      </div>
      <div >
        some more information
      </div>
      <span >42</span>
    </div>
    <div  id="collapseExample">
      <table >
        <thead>
          <tr>
            <th>#</th>
            <th>Foo, Bar</th>
            <th>Foobar</th>
            <th>FoobarBaz</th>
            <th>Baz</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some Text</td>
            <td>More text text text</td>
            <td>More text text text More text text text</td>
            <td>More text text text More text text text</td>
            <td>More text text text More text text text</td>
          </tr>
        </tbody>
      </table>
    </div>
  </li>
</ol>