如何制作并排可折叠按钮？

Question

所以我是使用 html 的新手，我一直在向 W3 学校学习，他们给了你这个可折叠的例子，但无论我做什么，它们都会堆叠并在每个学校的顶部打开其他我希望它们并排打开，内容并排显示，我该怎么做？

    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }

.collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }

    .active, .collapsible:hover {
      background-color: #555;
    }

    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }

    <h2>Collapsibles</h2>

    <p>A Collapsible:</p>
    <button type="button" class="collapsible">Open Collapsible</button>
    <div class="content">
      <p>test</p>
    </div>

    <p>Collapsible Set:</p>
    <button type="button" class="collapsible">Open Section 1</button>
    <div class="content">
      <p>test1</p>
    </div>
    <button type="button" class="collapsible">Open Section 2</button>
    <div class="content">
      <p>test2</p>
    </div>
    <button type="button" class="collapsible">Open Section 3</button>
    <div class="content">
      <p>test3</p>
    </div>

Answer 1

_{就我个人而言，我会完全避免 W3Schools.com。他们现在比 5-10 年前直截了当地给出糟糕的建议好多了，但他们今天仍然有很多不足之处，尤其是在他们的 server-side 教程，例如，在具有 XSS 漏洞的教程中有大量示例代码。尽管我推荐 MDN，但我承认 MDN 不是 beginner-friendly。不管怎样...}

总之....

要确保任意元素显示在一行中：
- 使用 display: flex 容器作为 parent（不是祖先）。
- 同时设置 flex-wrap: nowrap 以防止换行到多行。
  - 请务必在 children 上设置 flex-shrink: 1; 以防止不必要的水平滚动。
  - 要使布局“响应式”- 或至少在 phone 浏览器上可用，请使用 @media 查询 re-enables flex 包装。
在标题 use <details><summary>.
下包含可以 shown/hidden 的内容
- <details> 元素允许 web-pages 拥有可折叠的内容，根本不需要任何脚本。
- _{这在 HTML 中并不是什么新鲜事 (it was added to HTML5 in 2011, with Chrome and Safari supporting it by 2013) but Firefox didn't add support until late 2016, and MS Edge not supporting it until after Edge was based on Chromium at the end of 2019.}
- <details> 元素应该是容器的直接 children（有 display: flex;）。
- <summary> 元素包含始终可见的标题文本。
- 与 <summary> 相比其他的内容将在元素折叠时被浏览器隐藏。
  - 我比较喜欢把所有其他内容（除了<summary>放到自己的child<div>里面，保证一致spacing/padding ).

像这样：

:root {
  font-family: sans-serif;
}

div.collapsible-container {
  display: flex;
  flex-wrap: nowrap
}
  div.collapsible-container > details {
    flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 1;
  }


details {
  background-color: #777;
  border: 1px solid black;
  overflow: hidden;
}
details[open] {
  background-color: black;
}

  details > summary {
    color: white;
    padding: 1em;
    cursor: pointer;
  }
  details > summary:hover {
    background-color: black;
  }
  details > summary:active {
    background-color: pink;
  }
    details > summary::before {
      display: inline;
    }
    details[open] > summary::before {
      content: 'Close ';
    }
    details:not([open]) > summary::before {
      content: 'Open ';
    }
  
  details > summary + div {
    background-color: #f1f1f1;
    padding: 0.5em;
  }


/* Mobile-friendly (rounded corners on top and bottom items only): */
/* This is commented-out because the Whosebug snippet preview area is too narrow, so it will always use the mobile-friendly rules when we want to show the desktop styles instead:
@media screen and (max-width: 767px) {
  details:first-child {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }
  details:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
  }
  div.collapsible-container {
    flex-direction: column;
  }
    div.collapsible-container > details {
      flex-basis: auto;
      flex-grow: 1;
      flex-shrink: 1;
    }
}
*/

/* Same-row rounded-corners for desktops only: */
@media screen and (min-width: 768px) {
  details:first-child {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
  }
  details:last-child {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
  }
}

<div class="collapsible-container">

  <details>
    <summary>Section 1</summary>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris orci, pellentesque a urna ac, blandit scelerisque metus. Aliquam vulputate, magna ut mattis ultrices, dui neque aliquam felis, et posuere ipsum neque scelerisque leo. Fusce consequat in turpis nec egestas. Nunc sit amet pharetra nunc. Aenean in nisl non ante auctor finibus nec a elit. Maecenas ultricies mauris nec neque ultricies, vitae facilisis augue elementum. Vivamus quis fringilla quam. Ut at dolor lobortis, pretium tortor eu, bibendum ligula. Quisque ac nunc quis nulla finibus finibus eget consequat libero.</p>
    </div>
  </details>
  
  <details>
    <summary>Section 2</summary>
    <div>
      <p>Curabitur elementum tellus in ex bibendum, vitae fermentum elit facilisis. Sed nec nulla gravida, rhoncus odio sit amet, tempus metus. Curabitur aliquet quam in libero convallis iaculis. Phasellus laoreet tincidunt augue.</p>
      <p>Proin eros urna, facilisis non dictum vitae, blandit in nulla. Cras sagittis nibh lorem, eu interdum felis dignissim non. Etiam aliquet turpis urna, feugiat ornare urna pellentesque eu. Aenean congue risus lorem, eu laoreet urna congue facilisis. Curabitur scelerisque magna quis mauris rhoncus fermentum. Maecenas venenatis egestas felis vitae porttitor.</p>
      <p>Nam laoreet augue vel purus pharetra, ornare sollicitudin urna sagittis. Curabitur condimentum elit euismod fermentum porttitor. Sed tellus diam, fermentum et vulputate nec, bibendum at sem. Nunc posuere vel ipsum quis lacinia.</p>
    </div>
  </details>
  
  <details>
    <summary>Section 3</summary>
    <div>
      <p>Nulla vel lobortis neque. Proin magna justo, consectetur ut nunc at, consectetur pulvinar mauris.</p>
    </div>
  </details>

</div>

如何制作并排可折叠按钮？

How do you make a side by side collapsible buttons?

html

button