我设法toogle的p文本从个别框，但框在同一节仍然扩大，即使文本没有显示。我怎样才能避免另一个盒子膨胀呢？
我尝试了函数getElementbyID和getElementByClassName，但它们都不起作用。我不确定这是JS的问题还是CSS属性的问题。
谢谢你！

<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>

.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);
}

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

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