JSFiddle - React, Tailwind, and code Playground

by dk_dragonknight

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>
<body>
  <div class="dropdown" data-type="video">
    <div class="cycle-element">
      Click Me <span class="content-number"></span>
      <div class="pull-right hide"><span class="caret"></span></div>
    </div>
    <div class="dropdown-menu">
      <h3>
    Settings
    </h3>
      <hr />
      <select name="dependency" class="form-control dependency-select" style="width: 100%" multiple>
        <option>Test 1</option>
        <option>Test 2</option>
        <option>Test 3</option>
      </select>
    </div>
  </div>
</body>

CSS

.cycle-element {
  padding: 3px;
  margin-bottom: 5px;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  font-size: 0.9em;
  text-align: left;
}

JavaScript

$('body').on('click', '.dropdown .cycle-element', function(e) {
  $(this).parent().toggleClass('open');
});

$('body').on('click', function(e) {
  if (!$('.dropdown').is(e.target) && $('.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
   $('.dependency-select').select2('close');
    $('.dropdown').removeClass('open');
   
  }
});

$('.dependency-select').select2();