JSFiddle - React, Tailwind, and code Playground

by Александр Парчагин

HTML

<div class="filters">
    <div class="filters__tabs">
        <div class="filters__item active">Первый</div>
        <div class="filters__item">Второй</div>
        <div class="filters__item">Третий</div>
    </div>
    
    <div class="filters__list">
        <div class="filters__box active">
            
                <div class="2filters">
                    <div class="2filters__tabs">
                        <div class="2filters__item active">Первый</div>
                        <div class="2filters__item">Второй</div>
                        <div class="2filters__item">Третий</div>
                    </div>

                    <div class="2filters__list">
                        <div class="2filters__box active">Контент1</div>
                        <div class="2filters__box">Контент2</div>
                        <div class="2filters__box">Контент3</div>
                    </div>
                </div>       
            
            
        </div>
        <div class="filters__box">Контент2</div>
        <div class="filters__box">Контент3</div>
    </div>
</div>

Тест

CSS

.filters__tabs{
    margin-bottom: 20px;
}
.filters__item{
    display: inline-block;
    margin-right: 10px;
}
.filters__box{
    display: none;
}
.filters__box.active{
    display: block;
}

.2filters__tabs{
    margin-bottom: 20px;
}
.2filters__item{
    display: inline-block;
    margin-right: 10px;
}
.2filters__box{
    display: none;
}
.2filters__box.active{
    display: block;
}

JavaScript

$('.filters').on('click', '.filters__item:not(.active)', function() {			$(this).addClass('active').siblings().removeClass('active').parents('.filters').find('.filters__box').eq($(this).index()).fadeIn(500).siblings().fadeOut(0);
});

$('.2filters').on('click', '.2filters__item:not(.active)', function() {			$(this).addClass('active').siblings().removeClass('active').parents('.2filters').find('.2filters__box').eq($(this).index()).fadeIn(500).siblings().fadeOut(0);
});