JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="read-more-text">
        <p>
            ge / en / ru
პარკ ჰოუმ ვაკე
უკან
სტატუსი
4%
პარკ ჰოუმ ვაკე
„ანაგი დეველოპმენტის“ პირველი საცხოვრებელი კომპლექსი - პარკ ჰოუმი, ქალაქის ცენტრში აერთიანებს მშვიდ საცხოვრებელ გარემოს, უპრეცედენტოდ დიდ რეკრეაციულ ზონას და ჯანსაღი ცხოვრებისთვის აუცილებელ ინფრასტრუქტურას. ვაკეში მდებარე პრემიუმ კლასის, ენერგოეფექტური კომპლექსი თანამედროვე ადამიანის საჭიროებებზეა მორგებული - აქ ერთდროულადაა შესაძლებელი, გესმოდეთ ქალაქის გულისცემა, დაისვენოთ და სრულფასოვანი ცხოვრებისთვის საჭირო ნებისმიერი სერვისი მიიღოთ.

ილია ჭავჭავაძის გამზირიდან 200 მეტრით დაშორებული პარკ ჰოუმი 3 დამოუკიდებელ 10-სართულიან შენობას მოიცავს. უბანში ყველაზე დიდი, 8000 მ2, რეკრეაციული ზონით გარშემორტყმულ კომპლექსში მაცხოვრებლებს შეეძლებათ, ისარგებლონ საბავშვო და სპორტული მოედნებით, 25-მეტრიანი აუზით, ფიზნეს დარბაზით, პარკინგისა და კონსიერჟის მომსახურებით. კომპლექსის წინ დამატებით მოეწყობა 2 ჰექტარი ფართობის პარკი, რომლის განაშენიანებაშიც „ანაგი დეველოპმენტი“ მიიღებს მონაწილეობას
</div>
<div class="read-more-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt recusandae voluptates nesciunt porro repudiandae beatae aliquid dicta odit natus velit, quidem iste provident obcaecati, animi, delectus, molestiae similique? Quibusdam, explicabo.
</div>

CSS

.hidden-elem {
    display: none;
}
.hidden-elem.active {
    display: block;
}

JavaScript

function readMore_(wordsLength,buttonText){
	var readMoreElements = document.querySelectorAll('.read-more-text')
    readMoreElements.forEach(function(elem){
    	var textArr = elem.innerText.split(" ");
    	if(textArr.length > wordsLength){
        	elem.innerText = '';
        	var createFirstElem = document.createElement('div'),
            	createSecondElem = document.createElement('div'),
            	firstText = textArr.slice(0,wordsLength),
                secondText = textArr.slice(wordsLength,textArr.length),
                readMoreBtn = document.createElement('button');
                readMoreBtn.innerHTML = buttonText;
				
                createSecondElem.classList.add('hidden-elem')
            	
                readMoreBtn.addEventListener('click',function(){
                	this.parentNode.querySelector('.hidden-elem').classList.toggle('active')
                })
                
            for(var i = 0; i < firstText.length; i++){
            	createFirstElem.innerHTML += firstText[i] + ' ';
            }
            for(var i = 0; i < secondText.length; i++){
            	createSecondElem.innerHTML += secondText[i] + ' ';
            }
			elem.append(createFirstElem);
            elem.append(createSecondElem);
            elem.append(readMoreBtn)
            
        }
    })
}
if(document.querySelector('.read-more-text') != undefined){
	readMore_(50,'მეტის წაკითხვა')
}