CODEWITHSUNDEEP
javascriptjqueryhtml
Kyle Underhill
Kyle Underhill

Reputation: 109

JS checkbox dropdown

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>

Upvotes: 0

Views: 147

Answers (1)

Nirali
Nirali

Reputation: 1786

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>

Upvotes: 1

Related Questions