There are three main lines. By clicking on the main line, a previously hidden list drops, a class --active class is superimposed on it, and the main lines of the OPACITY class. The problem is that if you open another basic string, the OPACITY class begins to overlap already on active rows and flies the third line (in the example it is clear what happens). Tell me the algorithm to avoid it. It should be possible to open several tabs at once and when you close all tabs, everything should come to a default state.


Unfortunately I do not know how to add jQuery code, so the working example is in the link

.main {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px;
.main--active {
  background-color: #ccc;
.opacity {
  opacity: 0.4;
<div class="main">main row</div>  <ul class="hidden">    <li>subrow</li>    <li>subrow</li>    <li>subrow</li>    <li>subrow</li>  </ul><div class="main">main row</div>  <ul class="hidden">    <li>subrow</li>    <li>subrow</li>    <li>subrow</li>    <li>subrow</li>  </ul><div class="main">main row</div><ul class="hidden">  <li>subrow</li>  <li>subrow</li>  <li>subrow</li>  <li>subrow</li></ul>