JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <form class="form-inline" action="/echo/html/" method="POST">
        <div class="form-group js-hide">
          <div class="form-control js-click">Выберите рубрику <i class="fa fa-caret-down"></i></div>
          <div class="select">
            <div class="select-row">
              <input type="checkbox" name="category[]" value="cat-1" id="cat-1"/><label for="cat-1"><i class="fa fa-shopping-cart"></i> Продукты и товары</label>
            </div>
            <div class="select-row">
              <input type="checkbox" name="category[]" value="cat-2" id="cat-2"/><label for="cat-2"><i class="fa fa-desktop"></i> Бытовая техника и электроника</label>
            </div>
            <div class="select-row">
              <input type="checkbox" name="category[]" value="cat-3" id="cat-3"/><label for="cat-3"><i class="fa fa-paper-plane"></i> Туристические агентства</label>
            </div>
            <div class="select-row">
              <input type="checkbox" name="category[]" value="cat-4" id="cat-4"/><label for="cat-4"><i class="fa fa-glass"></i> Кафе и рестораны</label>
            </div>
          </div>
        </div>
        <div class="form-group">
          ...
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Найти</button>
        </div>
      </form>
    </div>
  </div>
</div>

CSS

.js-click {
    cursor: pointer;
}
.select {
    position: absolute;
}
.js-hide .select {
    display: none;
}
.select-row input {
    /* display: none; */
}
.select-row input + label {
    color: #999;
}
.select-row input:checked + label {
    color: #000;
}

JavaScript

$('.js-click').on('click',function (event) {
  event.preventDefault();
  $this = $(this);
  $this.parent().toggleClass('js-hide');
});