JS checkbox dropdown

Question

I have a checkbox .edit :input to enable/disable a dropdown input but as you can see the checkbox in the dropdown isn't opening and closing the dropdown properly when checked. Additionally if a cat-item is selected, the input for thecheckbox` disappears and the dropdown no longer functions.

How do I get the .title :input to toggle the dropdown and have it continue to function after a cat-item is selected?

$(".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")
    .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.parent().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">
    Choose...</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>

What behaviour are you expecting when the checkboxes are checked or changed? The first half of your problem is your CSS selector. What are you trying to select with the :input? What are you intending to do with the : prefix? — Sean
– Sean, Commented May 5, 2018 at 4:20
I basically just want to enable/disable the dropdown by toggling the .edit-icon button. Then have the dropdown open/close by checking the edit-input1 checkbox. — Kyle Underhill
– Kyle Underhill, Commented May 5, 2018 at 4:26

Nirali · Accepted Answer · 2018-05-05 04:51:17Z

Check below working snippet as per my understanding of your problem.

When selecting from dropdown you are replacing checkbox with text. that's why dropdown is not opening. So add span around label text of checkbox

<label class="title">
   <input class="edit-input1" type="checkbox"><span> Choose...</span>
</label>

So that we can change only text value of checkbox when selecting dropdown.

Secondly in other function

function openMenu($menu) { $list = $menu.children(".cat-list"); $menu.parent().toggleClass("closed");

you are toggling 'closed' class of '.edit' parent class. that is not write as you are toggling class of '.cat-dropdown' in closeMenu() function. same goes to here. SO changed that statement.

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>

Hey Nirali, how do we modify your solution to work for more than one instance? In the codepen here I added another instance and you can see that either checkbox opens both dropdowns. codepen.io/moofawsaw/pen/KRXwYR
@KyleUnderhill you mean one checkbox can open one related dropdown?
Yes exactly. In the codepen you can see what happens when I have two instances of the edit checkbox. They open together when they should be handled seperate
@KyleUnderhill you have to use parent child relationship. Check codepen.io/anon/pen/zjEvad

Collectives™ on Stack Overflow

JS checkbox dropdown

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related