JS Dropdown

dropdown.html

<div class="dropdown-wrapper" data-dropdown="wrapper">
  <button class="filter-toggle-button" data-dropdown="toggle">
    BUTTON HERE
  </button>
  <div class="dropdown" data-dropdown="content" data-role="model-filter">
    CONTENT HERE
  </div>
</div>

dropdown.js

$(function() {
  var toggle = "[data-dropdown='toggle']";
  var content = "[data-dropdown='content']";
  var wrapper = "[data-dropdown='wrapper']";

  $(toggle).click(function(event) {
    event.preventDefault();
    $(this).toggleClass("is-active");
    $(this).next(content).toggleClass("is-open");
  });

  $(document).click(function(event) {
    if (!$(event.target).closest(wrapper).length) {
      $(toggle).removeClass("is-active");
      $(content).removeClass("is-open");
    }
  });
});