Выпадающий список флажков JS

var $menu = $(".cat-dropdown-menu");
    $(".cat-dropdown .title :input").click(function() {
        var $menu = $(".cat-dropdown-menu");
        if ($menu.height() > 0) {
            closeMenu($menu);
        } else {
            openMenu($menu);
        }
    });
    $(".cat-dropdown-menu .cat-item").click(function() {
        var $menu = $(".cat-dropdown-menu");
        closeMenu($menu);
        $menu
            .closest(".cat-dropdown")
            .find(".title span")
            .text($(this).text())
            .css("color", this.style.color);
    });

    function closeMenu($menu) {
        $list = $menu.children(".cat-list");
        $menu.closest(".cat-dropdown").toggleClass("closed");
        $menu.css("height", 0);
        $list.css("top", 0);
    }

    function openMenu($menu) {
        $list = $menu.children(".cat-list");
        $menu.closest(".cat-dropdown").toggleClass("closed");
        $menu.css({
            height: 200
        });
    }
    $(".edit-toggle").prop("checked", true);
    $(".edit :input").attr("disabled", true);
    $(".edit-toggle").on("change", function() {
        var idInput = $(this).data("input");
        var inputEle = $("." + idInput);
        var toggleInput = $(this);
        inputEle.each(function() {
            var indicator = $(this).next();
            if (toggleInput.is(":checked")) {
                $(this).attr("disabled", true);
            } else {
                if ($(this).val() == "" && $(this).prop("required")) {}
                $(this).removeAttr("disabled");
            }
        });
    });

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.edit-icon {
  height: 25px;
  width: 25px;
}

.cat-dropdown {
  margin: 25px;
  text-align: left;
  color: #343c3f;
  border: 1px solid #a2acb0;
}

.cat-dropdown.closed .cat-dropdown-menu {
  margin-top: 0px;
}

.cat-dropdown.closed .cat-dropdown-menu .cat-item {
  height: 0px;
}

.cat-dropdown.closed .title {
  border-bottom: none;
}

.cat-dropdown.closed .title:after {
  margin-top: -16px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.cat-dropdown .title {
  width: 100%;
  position: relative;
  height: 40px;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #d9e1e4;
}

.cat-dropdown .title:after {
  display: block;
  content: "▾";
  position: absolute;
  right: 14px;
  margin-top: -16px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.cat-dropdown .cat-dropdown-menu {
  position: relative;
  overflow: hidden;
  max-height: 200px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-sizing: "border-box";
  -moz-box-sizing: "border-box";
  box-sizing: "border-box";
}

.cat-dropdown .cat-list {
  position: absolute;
  top: 0;
  width: 100%;
}

.cat-dropdown .cat-list .cat-item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #d9e1e4;
  padding: 0 12px;
  vertical-align: top;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: margin-top 0.5s, height 0.5s;
  -moz-transition: margin-top 0.5s, height 0.5s;
  transition: margin-top 0.5s, height 0.5s;
}

.cat-dropdown .cat-list .cat-item:hover {
  background-color: #d9e1e4;
  color: #343c3f;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class = "edit-icon" for = "edit-toggle1">
    <input id = "edit-toggle1" data-input = "edit-input1" class = "edit-toggle" type = "checkbox" name = "toggle" />
</label>
<div class = "cat-dropdown closed">
    <div class = "edit">
        <label class = "title">
            <input class = "edit-input1" type = "checkbox"><span> Choose...</span>
        </label>
        <div class = "cat-dropdown-menu">
            <div name = "category" id = "category" class = "cat-list">
                <div class = "cat-item" style = "color:#3772b1">Main 1</div>
                <div class = "cat-item" style = "color:#4eaddc">Main 2</div>
            </div>
        </div>
    </div>
</div>