JSFiddle - React, Tailwind, and code Playground

by saine

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">
  <a href="#"><span id="img_bmw"></span></a>
  <a href="#"><span id="img_aston"></span></a>
  <a href="#"><span id="img_acura"></span></a>
  <a href="#"><span id="img_ferrari"></span></a>
</div>

CSS

.wrapper [id*=img] {
  width: 146px;
  height: 72px;
  display: inline-block;
  border: 1px dotted #B9B9B9;
  background-color: #b7f7df;
  -webkit-transition: border 0.3s ease-out;
  transition: border 0.3s ease-out;
   box-sizing:border-box;
}
.wrapper a:hover span[id*=img]{
  border: 1px solid #E15A5A;
}
.wrapper #img_bmw{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/logo_bmw.png) no-repeat center center;
    background-size:40%;
}
.wrapper #img_aston{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/logo_aston_martin.png) no-repeat center center;
    background-size:60%;
}
.wrapper #img_acura{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/Acura-logo.png) no-repeat center center;
    background-size:40%;
}
.wrapper #img_ferrari{
  background:url(http://dizzre7r.bget.ru/uploads/brand-logo/logo_ferrari.png) no-repeat center center;
  background-size:40%;
 }

JavaScript

(function() {

  var req = document.querySelector('#selectCar'),
  blocks = document.querySelectorAll('[id^="img_"]');
var flag = 0;
req.onchange = function() {
  [].forEach.call(blocks, function(elem) {
    elem.style.borderColor = '';
    if (elem.id == req.value) {
      var id  = '#'+elem.id,
      top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 500);
      elem.style.border = '1px solid #E15A5A';
      if (elem.parentNode.id == "drop") {
        spoiler(); 
        top = $(id).offset().top;
       $('body,html').animate({scrollTop: top}, 500);
      }
    };

  })
};
function spoiler() {
  if (flag == 0) {
    $('.spoiler').html('Закрыть список');
    $('#drop').slideToggle();
    flag = 1;
  }
};
$(document).ready(function() {
  $('.spoiler').click(function() {
    if (flag == 0) {
      $('.spoiler').html('Закрыть список');
      $('#drop').slideToggle();
      flag = 1;
    } else {
      $('.spoiler').html('Расскрыть список');
      $('#drop').slideToggle();
      flag = 0;
    }
  });

});
})();