JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <div class="read-more">Read more</div>
</div>
<div class="box">
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <div class="read-more">Read more</div>
</div>
<div class="box">
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <div class="read-more">Read more</div>
</div>

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.box {
    border: 1px solid grey;
    display: inline-block;
    width: 30%;
    border-radius: 10px;
    margin: 20px 5px;
}
.read-more {
    padding-left: 20px;
}
.hidden {
    display: none;
}

JavaScript

function readMore(elem){
	var b = elem.querySelectorAll('ul li');
	for(var i = 0; i < b.length; i++){
    	if(i > 1){
        	b[i].classList.add('hidden');
        }
    }
}
var a = document.querySelectorAll('.box')
for(var i = 0; i < a.length; i++){
	readMore(a[i])		
}