Show hide elements according to their data

by Can

HTML

<ul>
  <li><a data-product="element-id" href="#">Element Id 1</a></li>
  <li><a data-product="element-id2" href="#">Element Id 2</a></li>
  <li><a data-product="element-id3" href="#">Element Id 3</a></li>
</ul>

<div id="wrap">
    <img id="element-id"> <!-- hidden files-->
    <img id="element-id2"> <!-- hidden files-->
    <img id="element-id3"> <!-- hidden files-->
</div>

CSS

#element-id, #element-id2, #element-id3 { display:none; width: 50px; height: 50px; background: red; }
#element-id2 { background: beige }
#element-id3 { background: tomato }

JavaScript

$('a').on('click', function(){
  $('#wrap img').hide().filter('#' + $(this).data('product')).show();
});