如何实现点击切换盒子内p文本且不撑开同区域其他盒子？

我实现了点击单个.motherboxes盒子切换内部<p>文本的显示与隐藏，但同一<section>中的其他盒子仍会被撑开，即便自身的<p>文本未显示。尝试过getElementById和getElementsByClassName方法，均未解决，不确定是JavaScript逻辑还是CSS属性导致的问题，求解决方案。

原始代码 #

HTML

<section class="collapse">
        <div class="motherboxes">
          <h3>
          Title #1
          </h3>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolorum voluptas, rerum aliquam totam eaque ratione cumque voluptate similique! Repudiandae adipisci, tenetur qui! Quibusdam rem unde ipsam molestias repellat ut.
          </p>
        </div>
        
        <div class="motherboxes">
          <h3>Title #2</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          </p>
        </div>
        </section>
        <section class="collapse">
        <div class="motherboxes">
          <h3>
          Title #3
          </h3>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolorum voluptas, rerum aliquam totam eaque ratione cumque voluptate similique! Repudiandae adipisci, tenetur qui! Quibusdam rem unde ipsam molestias repellat ut.
          </p>
        </div>
        
        <div class="motherboxes">
          <h3>Title #4</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          </p>
        </div>
        </section>

CSS

.collapse {
    display: flex;
    flex-direction:row;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .motherboxes {
    align-items: row;
    border: none;
    border-radius: 10px;
    background: #fff3f3;
    margin: 0.5em;
    padding: 1em;
    flex-basis:45%;
    cursor: pointer;
  }
  
  .motherboxes h3 {
    text-align: center;
  }
  
  .motherboxes p {
  display: none;
  }
  
  .motherboxes.active p {
    display: block;
  }
  
  .motherboxes:hover{
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  } 

JavaScript

const elements = document.querySelectorAll(".motherboxes");

elements.forEach((el) => el.addEventListener('click', () => {
    el.classList.toggle('active');
}))

这是Flex布局的默认特性导致的：.collapse容器设置了display: flex，而Flex容器默认的align-items值是stretch——所有Flex子元素（.motherboxes）会被强制拉伸到容器内最高元素的高度。所以当其中一个盒子展开<p>变高后，同section的其他盒子会被同步拉高，哪怕它们的<p>处于隐藏状态。

这个问题和JavaScript逻辑无关，完全是CSS布局属性的问题。

方案1：修改Flex容器的对齐方式 #

给.collapse添加align-items: flex-start，让子元素按自身高度排列，不再被强制拉伸：

.collapse {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: flex-start; /* 新增该行 */
}

方案2：单独设置子元素的对齐方式 #

如果不想修改容器的全局对齐规则，也可以给.motherboxes单独设置align-self: flex-start：

.motherboxes {
    align-items: row;
    border: none;
    border-radius: 10px;
    background: #fff3f3;
    margin: 0.5em;
    padding: 1em;
    flex-basis: 45%;
    cursor: pointer;
    align-self: flex-start; /* 新增该行 */
}

额外优化：平滑过渡效果（可选） #

如果想让展开/收起的过程更自然，可以把<p>的display切换改成max-height+overflow的组合，配合过渡动画：

/* 替换原来的 .motherboxes p 和 .motherboxes.active p 样式 */
.motherboxes p {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease; /* 添加过渡动画 */
}

.motherboxes.active p {
    max-height: 200px; /* 设置一个足够容纳文本的高度，可根据实际内容调整 */
}

这种方式既能实现显示隐藏，又能避免布局跳变，同时保留Flex布局的灵活性。

内容的提问来源于stack exchange，提问作者WinterHeaven91