JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>
<input name="" type="text" id="field">
<input name="" type="button" id="go" value="goo">

CSS

.expanded{background-color: red;}
.contracted{background-color:grey}

JavaScript

$('#go').click(function(){
		var count=parseInt($('#field').val())
		
		if(count>=1){
			$('ul li').attr('class','')
			}
			
		if(count>1&&count<=4){
			$('ul li').attr('class','expanded')
			}
			
		if(count>4&&count<=10){
			$('ul li').attr('class','contracted')
			for(i=0;i<3;i++){
				$('li:eq('+i+')').attr('class','expanded')
				}
			}
			
		if(count>10&&count<=18){
			$('ul li').attr('class','contracted')
			for(i=0;i<2;i++){
				$('li:eq('+i+')').attr('class','expanded')
				}
			}
				
		if(count>18){
			$('ul li').attr('class','contracted')
			$('ul li:first').attr('class','expanded')
		}
	})