[Cleo]

Привет!
Подскажите кто-нибудь пожалуйста как быть?

У меня список вот из таких пунктов

<div className="xitem">
        <div className="main">
            <div className="tag">test</div>
            <div className="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>

Нужно чтобы при открытии было видно только 3 строки а при клике на пункт он плавно на весь текст разворачивался. =(

вот что пока есть

const items = document.querySelectorAll('.xitem');

    items.forEach(item => {
        item.addEventListener('click', function() {
            items.forEach(elem => elem.classList.remove('active'));
            this.classList.add('active');

            $(this).find('.value').css({'max-height':'3em'});
            $(this).find('.value').css({'height':'3em'});


            $(this).find('.value').slideToggle( "slow", function() {

                $(this).find('.value').css({'max-height':'10em'});
                $(this).find('.value').css({'height':'10em'});

            });

        });
    });