JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div style="height:300px;"></div>
<div class="toggle--box" data-item="0">1</div>
<div class="toggle--box" data-item="1">2</div>
<div class="toggle--box" data-item="2">3</div>


<div class="toggle--text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus, cumque atque qui minus exercitationem ea, inventore eos vel, corporis molestias tempora soluta neque, aut rerum quidem possimus sint nihil.
</div>
<div class="toggle--text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus, cumque atque qui minus exercitationem ea, inventore eos vel, corporis molestias tempora soluta neque, aut rerum quidem possimus sint nihil.
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, saepe animi. Obcaecati, debitis cumque nihil dolorem sit impedit voluptatem deleniti perspiciatis in, eveniet aperiam porro? Consequatur beatae quibusdam laborum ea.</div>
  <div>Tenetur sed ullam, quia blanditiis temporibus modi velit officia aliquid atque commodi assumenda perspiciatis deserunt cum consectetur laborum quos illo eligendi earum, nihil libero rerum quis soluta. Ratione, iure, possimus.</div>
  <div>Aliquid saepe vero ipsum beatae laborum amet esse quidem qui nihil aperiam. Inventore nihil debitis praesentium, commodi, nulla repudiandae sapiente odio natus quas ipsam blanditiis iste. Harum odit aspernatur illo.</div>
</div>
<div class="toggle--text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus, cumque atque qui minus exercitationem ea, inventore eos vel, corporis molestias tempora soluta neque, aut rerum quidem possimus sint nihil.
</div>

CSS

.toggle--box {
    display: inline-flex;
    border: 1px solid black;
    padding: 40px;
    cursor: pointer;
}
.toggle--text {
    display: none;
}
.toggle--text.active {
    display: block;
    animation: fadeIn 0.5s both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translate(0,50px);}
    to { opacity: 1; transform: translate(0,0px);}
}

JavaScript

function toggleKfn(){
	var btns = document.querySelectorAll('.toggle--box'),
    	elems = document.querySelectorAll('.toggle--text');
    for(let btn of btns){
    	btn.addEventListener('click',function(){
        	for(var i = 0; i < elems.length; i++){
            	elems[i].classList.remove('active')
            }
            elems[Number(this.dataset.item)].classList.add('active')
        })
    }
}
toggleKfn()

function getRandom(){
	var arr = [];
    for(var i = 0; i < 10; i++){
    	var number = Math.floor(Math.random() * 10);
    	arr.push(number)
    	for(var j = 0; j < arr.length; j++){
        	if(arr[j] === number){
            	console.log(number,arr)
                return
            }
        }
    }
}
getRandom()