панель раскрывается 2

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">
  <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>
  <br>
</div>

CSS

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 {
  display: none;
}

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

JavaScript

var req = document.querySelector('#selectCar'),
  blocks = document.querySelectorAll('[class^="img_"]');
var flag = 0;
req.onchange = function() {

  [].forEach.call(blocks, function(elem) {
    elem.style.borderColor = '';
    if (elem.className == req.value) {
      elem.style.borderColor = 'rgba(0,255,0,1)';
       elem.scrollIntoView(top);
      if (elem.parentNode.id == "drop") {
        spoiler();
         elem.scrollIntoView(top);
        
      }
    };
  })
};

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;
    }
  });

});



подключать  -script type="text/javascript" src="imgcms/public_html/templates/unishop/js/spisok.js"></script>