JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<select name="" value="Сделайте выбор" id="selectCar">
  <option value="">Сделайте выбор</option>
  <option value="img_bmw">BMW</option>
  <option value="img_aston">Aston</option>
  <option value="img_acura">Acura</option>
  <option value="img_audi">Audi</option>
  <option value="img_ferrari">Ferraru</option>
</select>
<br>
<br>
<div class="img_bmw"></div>
<div class="img_aston"></div>
<div class="img_acura"></div>
<div class="img_audi"></div>
<div class="img_ferrari"></div>
<a href="#" class="spoiler">Расскрыть список</a>
<div id="drop">
  <div class="img_audi"></div>
  <div class="img_ferrari"></div>
</div>

CSS

div[class*=img] {
  width: 100px;
  height: 100px;
  display: inline-block;
  border-width:3px;
  border-color:rgba(0,0,0,0);
  border-style:solid;
  background-color:#b7f7df;
}
#drop {
display:none;
}
.spoiler{
  text-decoration:none;
  color:black;
}

JavaScript

var req = document.querySelector('#selectCar'),
    blocks = document.querySelectorAll('[class^="img_"]');
req.onchange = function() {
  [].forEach.call(blocks, function(elem) {
    elem.style.borderColor = '';
    if (elem.className == req.value) {
      elem.style.borderColor = 'rgba(0,255,0,1)';
    }
  })
};
$(document).ready(function(){
    $(".spoiler").click(function(){
    $("#drop").slideToggle();
  });
});