Делаю блок который может сворачиваться тем самым пряча часть контента, но проблема возникает в том что невозможно угадать высоту контента в свернутом виде на разных разрешениях часть строки может выглядывать, потому что разный размер шрифта и разное количество текста, где то 1 параграф большой, а где то 2 маленьких. Вариант разделить на 2 блока тот что всегда виден и второй что скрыт/развернут не подходит. Что можно придумать в этом случае?
<div class="dropdown" aria-expanded="false" data-height="высота в свернутом виде">
<div class="dropdown__content">
<!-- какой то текстовый контент -->
</div>
<button class="dropdown__button">Развернуть/Свернуть</button>
</div>
document.addEventListener('click', e => {
if( !e.target.closest('.dropdown__button') ) return;
const dropdown = e.target.closest('.dropdown');
const dropdownContent = dropdown.querySelector('.dropdown__content');
const dropdownButton = e.target.closest('.dropdown__button');
const opened = (dropdown.getAttribute('aria-expanded') === 'true');
if(opened) {
dropdown.setAttribute('aria-expanded', false);
dropdownContent.style.maxHeight = dropdown.dataset.height + 'px';
} else {
dropdown.setAttribute('aria-expanded', true);
dropdownContent.style.maxHeight = calcHeightContent(dropdownContent) + 'px';
}
})
function calcHeightContent(element) {
const containerClone = element.cloneNode(true);
let naturalHeight = 0;
containerClone.style.position = 'absolute';
containerClone.style.visibility = 'hidden';
containerClone.style.opacity = 0;
containerClone.style.maxHeight = '100%';
containerClone.style.zIndex = -1;
element.parentNode.append(containerClone);
naturalHeight = containerClone.clientHeight;
containerClone.remove();
return naturalHeight;
}
