toggle fields

by Soviut

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="row">"field": "value goes here",</div>
<div class="row">"field": "value goes here",</div>
<div class="row">"field": "value goes here",</div>

CSS

body {
  font-family: monospace;
}

.row {
  position: relative;
  padding: 5px 30px;
  
  cursor: pointer;
}

.row:hover {
  background: cornflowerblue;
}

.row:hover:before {
  content: '+';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  
  background: #CCC;
}

.row.selected:before {
  content: '✓';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  
  background: #CCC;
}

.row.selected:hover:before {
  content: '-';
}

JavaScript

$('.row').on('click', function(e) {
	$(this).toggleClass('selected')
})