Как сделать скрытие текста вне элемента и при клике на другуой текст?
Как сделать скрытие текста вне элемента и при клике на другуой текст?
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>