JQUERY CSS3 click to show related object by data attribute

JQUERY CSS3 click to show related object by data attribute - Andrew Pougher

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
      
      <h3>Show Family Products</h3>
<div class="products">
<div class="object" data-id="C114MO"><span class="obid"><img src="http://placehold.it/140x50&text=Product Name"><br>PRODUCT C114MO</span></div>
<div class="object" data-id="C114M1"><span class="obid"><img src="http://placehold.it/140x50&text=Product Name"><br>PRODUCT C114M1</span></div>
<div class="object" data-id="C114M1"><span class="obid"><img src="http://placehold.it/140x50&text=Product Name"><br>PRODUCT C114M1</span></div>
<div class="object" data-id="C114M45"><span class="obid"><img src="http://placehold.it/140x50&text=Product Name"><br>PRODUCT C114M45</span></div>
<div class="object" data-id="C114M45"><span class="obid"><img src="http://placehold.it/140x50&text=Product Name"><br>C114M45</span></div>
<div class="object" data-id="C114M45"><span class="obid"><img src="http://placehold.it/140x50&text=Product Name"><br>C114M45</span></div>
</div>
    
    </div>
</div>

CSS

body{background:#f4f2ed}

.object{
    border:3px solid #bbb39e;
    padding:4px;
    min-width:90px;
    min-height:50px;
    display:inline-block;
    margin:20px;
    box-shadow:1px 1px 11px #d1cfca;
    transition: all .5s linear;
    background: white;
}

.familyproduct{
  background-color: #ff2;
        border:3px solid #635c10;
}

JavaScript

$('.object').click(function(e) {
 $("body *").removeClass("familyproduct");
var wordID = $(this).data('id');     
$("body *").find("[data-id='" + wordID + "']").addClass('familyproduct')
e.preventDefault();
});