как создать подкат спойлер от трёх строк и выше

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

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

Код (Text):

1. <div className="xitem">
2.   <div className="main">
3.   <div className="tag">test</div>
4.   <div className="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
5.   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
6.   took a galley of type and scrambled it to make a type specimen book. It has survived not only five
7.   centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
8.   </div>
9.   </div>
10. </div>

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

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

Код (Text):

1.  
2.   const items = document.querySelectorAll('.xitem');
3.  
4.   items.forEach(item => {
5.   item.addEventListener('click', function() {
6.   items.forEach(elem => elem.classList.remove('active'));
7.   this.classList.add('active');
8.  
9.   $(this).find('.value').css({'max-height':'3em'});
10.   $(this).find('.value').css({'height':'3em'});
11.  
12.  
13.   $(this).find('.value').slideToggle( "slow", function() {
14.  
15.   $(this).find('.value').css({'max-height':'10em'});
16.   $(this).find('.value').css({'height':'10em'});
17.  
18.   });
19.  
20.   });
21.   });

--- Добавлено ---
кончено там у меня не className а просто class автопомошник в редакторе так почему то сделал