Common border around selected items

by dipish

HTML

<p><i>blue shadow is just for debugging, it's supposed to be red as well</i></p><br />
<div class="item item-selected">item</div>
<div class="item">item</div>
<div class="item item-selected">item</div>
<div class="item">item</div>
<div class="item item-selected">item</div>
<div class="item item-selected">item</div>
<div class="item item-selected">item</div>
<div class="item">item</div>
<div class="item item-selected">item</div>

CSS

body {
    margin: 30px;
    background: lightgrey;
}

* {box-sizing: border-box;}

.item {
    width: 150px;
    height: 50px;
    background: transparent;
    /*border: solid 1px transparent;*/
    position: relative;
}

.item-selected {
    background: white;
    /*border: solid 1px red;
    border-bottom: none;*/
    box-shadow: 0 -1px 0px blue, 0 1px 0 blue;
    border-left: solid 1px red;
    border-right: solid 1px red;
    /*outline: solid 1px red;*/
}

.item-selected + .item-selected {
    /*border-top-color: transparent;*/
    /*box-shadow: none;
    border-top-color: transparent;*/
    /*box-shadow: 0 -1px 0px blue;*/
    box-shadow: 0 1px 0 blue;
}

JavaScript

$('body').on('click', '.item', function() {
    $(this).toggleClass('item-selected');
});