我設法從單個框中獲取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');
}))

只是你必須為所有的盒子制作不同的部分，這樣它就可以通過使用JS單獨展開。

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

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

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

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

<section class="collapse">
  <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>
</section>

<section class="collapse">
  <div class="motherboxes">
    <h3>Title #4</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </div>
</section>