JSFiddle - React, Tailwind, and code Playground

by Kirouthika K

HTML

<ul>
  <li>
    <a class="tab" href="#">Tab1</a>
    <div>
    <span>X</span>
      Acne - a lingering, inflammatory skin condition resulting in whiteheads, blackheads, pimples, cysts, and nodules.
    </div>
  </li>
  <li>
    <a class="tab" href="#">Tab2</a>
    <div>
      Everyone one of us has one simple question - What is yoga all about? If you think only people with flexible bodies are benefited, then it’s time for you to reconsider.
    </div>
  </li>
  <li>
    <a class="tab" href="#">Tab3</a>
    <div>
      The practice of yoga has enormous benefits for not just the body but also for the mind so that you take pleasure in a perfectly healthy state of being.
    </div>
  </li>
</ul>

CSS

ul {
  width: 200px;
  border: 1px solid #000;
  padding: 0;
}

ul li {
  list-style-type: none;
  border-bottom: 1px solid #000;
  position: relative;
}

ul li a {
  padding: 10px;
  display: block;
  color: green;
  text-transform: capitalize;
  text-decoration: none;
}

ul li:last-child {
  border: 0;
}

ul li a:hover {
  background: green;
  color: #fff;
}

ul li div {
  width: 160px;
  border: 1px solid grey;
  background: #b9b2b2;
  position: absolute;
  top: 0;
  right: -165px;
  display: none;
}
div span{
  display:block;
  background:red;
  font-weight:bold;
  color:#fff;
  border:1px solid #fff;
  font-size:10px;
  border-radius:50%;
  width:20px;
  height:20px;
  float:right;
  text-align:center;
  padding:3px;
}
.show {
  display: block;
}

JavaScript

$(".tab").click(function() {
  
  $(this).siblings("div").toggleClass('show');
  
});
$(document).on("click", function(e) {
    if ($(e.target).is(".tab,div") === false) {
      $("div").removeClass("show");
    }
  });