Показать сообщение отдельно
  #5 (permalink)  
Старый 05.06.2023, 10:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,132

Спойлер открытие блока на всю его высоту
Cleo,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .xitem {
            width: 250px;
        }

        .value {
            max-height: 3em;
            overflow: hidden;
            transition: max-height 1s;
        }

        .xitem.active .value {
            max-height: var(--h);
        }
    </style>
</head>

<body>
    <div class="xitem">
        <div class="main">
            <div class="tag">test</div>
            <div class="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="xitem">
        <div class="main">
            <div class="tag">test</div>
            <div class="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="xitem">
        <div class="main">
            <div class="tag">test</div>
            <div class="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <script>
        const items = document.querySelectorAll('.xitem');
        items.forEach(item => {
            item.addEventListener('click', (event) => {
                if (event.target.closest('.tag'))
                    items.forEach(el => el == item ? el.classList.toggle('active') : el.classList.remove('active'))
            })
            let h = item.querySelector('.value').scrollHeight;
            item.style.setProperty('--h', `${h}px`)
        })
    </script>
</body>

</html>
Ответить с цитированием