select and deselect a div

by Andy Bulka

HTML

<div class="one selectable">AA</div>
<div class="two selectable">BB</div>
<div class="three selectable">CC</div>
<div id="props">

</div>

CSS

.selectable { border-width: 1px;
border-color: black;
border-style: solid;
margin: 2px;
}
.selected { border-width: 2px;
border-color: red;
border-style: solid;
}
.one {
  color: green;
  width: 200px;
  height: 100px;
}
.two {
  color: blue;
}
.three {
  color: red;
}

JavaScript

$('.selectable').on('click', function(e) {
  $('.selectable').removeClass('selected')
  $(e.target).addClass('selected')
  e.stopPropagation();
  $('#props').text(e.target.className)
})
$(window).click(function() {
  $('.selectable').removeClass('selected')
  $('#props').text('')
});