JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="structure">
<div class="lvl1">
<div class="obertka">
<div class="small_cart">
some html
<div class="opening">20 отделов</div>
</div>
<div class="full_cart closed">
<span class="close_cart"><i class="demo-icon icon-left"></i>
Закрыть карточку</span>
some html
</div>
</div>
<div class="lvl2">
<div class="obertka">
<div class="small_cart">
some html
<div class="opening">20 отделов</div>
</div>
<div class="full_cart closed">
<span class="close_cart"><i class="demo-icon icon-left"> </i>Закрыть карточку</span>
some html
</div>
</div>
<div class="acc">
<div class="lvl3">
<div class="obertka">
<div class="small_cart">
some html
<div class="opening">20 отделов</div>
</div>
<div class="full_cart closed">
<span class="close_cart"><i class="demo-icon icon-left"></i>Закрыть карточку</span>
some html
</div>
</div>
<div class="lvl4">
<div class="obertka">
<div class="small_cart">
some html
<div class="opening">20 отделов</div>
</div>
<div class="full_cart closed">
<span class="close_cart"><i class="demo-icon icon-left"></i>Закрыть карточку</span>
...
CSS
.structure {
float: left;
width: 100%;
}
.lvl2, .lvl3, .lvl4 {
width: calc(100% - 60px);
padding-left: 60px;
float: left;
}
.obertka {
padding: 5px;
margin: 10px;
float: left;
width: 80%;
border: 1px solid blue;
}
.opening {
background: rgba(0,0,0,.5);
}
.close_cart {
border: 3px solid red;
float: left;
}
.full_cart {
width: 100px;
height: 100px;
background: green;
}
.closed {
background: magenta;
}
JavaScript
$('.opening').on( "click", function() {
$(this).parent().parent().find('.full_cart').addClass('closed');
$(this).parent().parent().find('.full_cart').removeClass('closed');
});