JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul class="persons">
  <li><a href="#">Tom</a></li>
  <li><a href="#">Jerry</a></li>
</ul>

CSS

.persons li {
  list-style-type: none;
  opacity: 1;
}

.persons li a {
  color: black;
  text-decoration: none;
}

.persons li.closed {
  opacity: 0.2;
}

.persons li.alt a {
  color: green;
}

JavaScript

$(document).ready(function() {
  $(document).on("click", ".persons li", function() {
    $(this).toggleClass("closed");
  });
  $(document).on("dblclick", ".persons li", function() {
    $(this).toggleClass("alt");
  })

});