Как сделать скрытие текста вне элемента и при клике на другуой текст?

Как сделать скрытие текста вне элемента и при клике на другуой текст?

const box = document.querySelector('.team__box');
const boxInner = box.querySelectorAll('.team__box-slide');

boxInner.forEach((item) => {
  const content = item.querySelector('.team__box-slide_descr-definition');

  const height = content.scrollHeight;

  item.addEventListener('click', () => {
    content.style.height = height + 'px';
  })
})
.team__box-slide_descr-definition {
    height: 0;
    transition: .3s all;
    overflow: hidden;
}
<div class="team__box">
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
</div>


Ответы (1 шт):

Автор решения: Lukas

 const box = document.querySelector('.team__box');
 const boxInner = box.querySelectorAll('.team__box-slide');

    boxInner.forEach((item) => {
      const content = item.querySelector('.team__box-slide_descr-definition');

      item.addEventListener('click', (e) => {
        e.stopPropagation();

        // Закрываем все открытые элементы
        boxInner.forEach(innerItem => {
          if (innerItem !== item) {
            innerItem.classList.remove('active');
            const innerContent = innerItem.querySelector('.team__box-slide_descr-definition');
            innerContent.style.height = '0';
          }
        });

        // Переключаем текущий элемент
        item.classList.toggle('active');
        if (item.classList.contains('active')) {
          content.style.height = content.scrollHeight + 'px';
        } else {
          content.style.height = '0';
        }
      });
    });

    document.addEventListener('click', () => {
      // Закрываем все элементы при клике вне их
      boxInner.forEach(item => {
        item.classList.remove('active');
        const content = item.querySelector('.team__box-slide_descr-definition');
        content.style.height = '0';
      });
    });
    .team__box-slide_descr-definition {
      height: 0;
      transition: .3s all;
      overflow: hidden;
    }
<div class="team__box">
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
</div>

→ Ссылка