JSFiddle - React, Tailwind, and code Playground
by Antkaz
HTML
<div class="block-menu-big">
<div class="left-block">
<div class="block-menu-link"><span>TEXT 1</span></div>
<div class="block-menu-link"><span>TEXT 2</span></div>
<div class="block-menu-link"><span>TEXT 3</span></div>
</div>
<div class="block-menu-link">
<!--меню TEXT 1-->
<div class="lefel-block active submenu">
<div class="mmenu-colums">
<a class="link seo-menu__link" href="">TEXT 1.1</a>
<a class="link seo-menu__link" href="">TEXT 1.2</a>
<a class="link seo-menu__link" href="">TEXT 1.3</a>
</div>
<div class="mmenu-colums">
<a class="link seo-menu__link" href="">TEXT 1.1.1</a>
<a class="link seo-menu__link" href="">TEXT 1.2.1</a>
<a class="link seo-menu__link" href="">TEXT 1.3.1</a>
</div>
</div>
<!--меню TEXT 2 -->
<div class="lefel-block submenu">
<div class="mmenu-colums">
<a class="link seo-menu__link" href="">TEXT 2.1</a>
<a class="link seo-menu__link" href="">TEXT 2.2</a>
<a class="link seo-menu__link" href="">TEXT 2.3</a>
</div>
<div class="mmenu-colums">
<a class="link seo-menu__link" href="">TEXT 2.1</a>
<a class="link seo-menu__link" href="">TEXT 2.2</a>
<a class="link seo-menu__link" href="">TEXT 2.3</a>
</div>
</div>
</div>
CSS
.left-block {
display: block;
color: red;
cursor: pointer;
float:left;
}
.block-menu-link {
display: block;
margin-left: -1px;
border-left: 1px solid #ebebeb;
}
.lefel-block {
max-width: 975px;
display: block;
}
.mmenu-colums {
display: inline-block;
width: 175px;
vertical-align: top;
padding-left: 20px;
white-space: normal;
}
.seo-menu__link {
display: block;
padding: 6px 0;
}
.block-menu-link .lefel-block{
display: none;
}
.block-menu-link .active {
display: block;
}
JavaScript
$(document).ready(function(){
var list_item = $(".block-menu-link");
$(list_item).has('.submenu').click(function(){
$(list_item).children(".submenu").stop().slideUp();
$(this).children(".submenu").stop().slideDown();
});
});