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="filterstwo">
                    <div class="filterstwo__tabs">
                        <div class="filterstwo__item active">Первый</div>
                        <div class="filterstwo__item">Второй</div>
                        <div class="filterstwo__item">Третий</div>
                    </div>

                    <div class="filterstwo__list">
                        <div class="filterstwo__box active">Контент1</div>
                        <div class="filterstwo__box">Контент2</div>
                        <div class="filterstwo__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;
}

.filterstwo__tabs{
    margin-bottom: 20px;
}
.filterstwo__item{
    display: inline-block;
    margin-right: 10px;
}
.filterstwo__box{
    display: none;
}
.filterstwo__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);
});

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