JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<input type="search" id="txt">
<input type="button" id="btn" value="Найти">
<br>
<br>
<div class="wrap">
  <div class="img_bmw"></div>
  <div class="img_aston"></div>
  <div class="img_acura"></div>
  <br>
<input type="checkbox" id="tog">
<label for="tog">Расскрыть список</label>
<div id="drop">
  <div class="img_audi"></div>
  <div class="img_ferrari"></div>
</div>
<div class="img_acura"></div>
</div>

CSS

div[class*=img] {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 2px solid blue;
}

div:not(.wrap):not(#drop) {
  background: #a500ff;
}

#tog {

}

label {
  cursor: pointer;
}

#drop {
  border: 0px solid black;
  height: 0;
  transition: 0.5s height ease-in;
  transition: 0.5s opacity ease-in;
  opacity: 0;
}

input:checked ~#drop {
  height: 150px;
  opacity: 1;
}

JavaScript

(function() {
  var button = document.getElementById("btn");
  button.onclick = function() {
    var found = document.getElementById("txt").value,
      but = document.querySelectorAll('div[class*=' + found + ']'),
      div = document.querySelectorAll('div[class*=img]');
    [].forEach.call(div, function(elem) {
      elem.style.border = '2px solid blue';
    })
    if (but != []) {
      [].forEach.call(but, function(elem) {
        elem.style.border = '2px solid red';
        if (elem.style.opacity == 0) {
					document.getElementById("tog").ckecked = true;
        }
      })
    } else {
      alert("erorr")
    }
  };
})();