JSFiddle - React, Tailwind, and code Playground

by isqua

HTML

<div class="container container-inline">
    <button>Toggle animation</button>
    <div class="items">
        <div class="item"></div>
        <span class="animation"><div class="item"></div></span>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

<div class="container container-inline-block">
    <button>Toggle animation</button>
    <div class="items">
        <div class="item"></div>
        <span class="animation"><div class="item"></div></span>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

<div class="container container-block">
    <button>Toggle animation</button>
    <div class="items">
        <div class="item"></div>
        <span class="animation"><div class="item"></div></span>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

CSS

.container-inline .item
{
    display: inline;
}
.container-inline .item:before
{
    content: 'i';
}

.container-inline-block .item
{
    display: inline-block;
}

.container-block .item
{
    display: block;
}

.item
{
    width: 40px;
    height: 40px;
    background: #ccc;
}

.animation_hidden_yes
{
    display: none;
}

JavaScript

document.querySelectorAll('.container')
    .forEach(function(container) {
        var animation = document.querySelector('.animation'),
            button = document.querySelector('button');
        
        console.log(animation);
    
        button.addEventListener('click', function() {
            animation.classList.toggle('animation_hidden_yes');
        }, false);
    });