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">Ferrari</option>
</select>
<br>
<br>
<div class="wrapper">
  <div class="img_bmw"></div>
  <div class="img_aston"></div>
  <div class="img_acura"></div>
  <div class="img_ferrari"></div>
  <br>
  <a href="#" class="spoiler">Расскрыть список</a>
  <div id="drop">
    <div class="img_audi"></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;
}

.wrapper {
  position: relative;
}

#drop {
  overflow: hidden;
  height: 0px;
}

.spoiler {
  text-decoration: none;
  color: black;
}

JavaScript

var req = document.querySelector('#selectCar'),
  blocks = document.querySelectorAll('[class^="img_"]'),
  drop = document.querySelector('#drop'),
  spoiler = document.querySelector('.spoiler');
  var i = 0,j = 0,s = 110;
req.onchange = function() {
  [].forEach.call(blocks, function(elem) {
    elem.style.borderColor = '';
    if (elem.className == req.value) {
      elem.style.borderColor = 'rgba(0,255,0,1)';
      if (elem.parentNode.id == "drop") {
       if (++i <= s) {
    spoiler.innerHTML = 'Закрыть список';
    drop.style.height = i + 'px';
    j = i;
    if (j >= s) return false;
  } window.setTimeout(arguments.callee, 1);
  return false;
      }
    };
  })
};


spoiler.onclick = function() {
  if (++i <= s) {
    spoiler.innerHTML = 'Закрыть список';
    drop.style.height = i + 'px';
    j = i;
    if (j >= s) return false;
  } else {
    spoiler.innerHTML = 'Расскрыть список';
    drop.style.height = --j + 'px';
    if (j <= 0) {
      i = 0;
      return false;
    }
  }
  window.setTimeout(arguments.callee, 1);
  return false;
};