JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<li id="dw">первый</li>
<li id="dt">втрой</li>
<li id="dh">третий</li>
<div id="h" class="box">
    <p id="close">Закрыть</p>третий</div>
<div id="t" class="box">
    <p id="close">Закрыть</p>втрой</div>
<div id="w" class="box">
    <p id="close">Закрыть</p>первый</div>

CSS

.box {
    cursor:pointer;
    display:none;
    width:200px;
    height:500px;
}
p {
    cursor:pointer;
    padding:20px;
    background:#eee;
}
li {
    margin-bottom:20px;
    width:200px;
    cursor:pointer;
    border-bottom:2px solid;
}
.ase {
    display:inline-block;
}
#w {
    background:green;
}
#h {
    background:red;
}
#t {
    background:yellow;
}

JavaScript

$("#dt").click(function () {
      $('#t').addClass("ase");
  });
  $("#dh").click(function () {
      $('#h').addClass("ase");
  });
  $("#dw").click(function () {
      $('#w').addClass("ase");
  });
  $(".box").click(function () {
      $(this).removeClass("ase");
  }, function () {
      $(this).removeClass("ase");
  });