Collapse Dropdown of Select Box

I am working on custom select drop-down which has check-boxes for multiple selections which I Have got from this question.

The problem is once the drop-down expands, it doesn't collapse as in a regular select box when you click anywhere outside.

HTML:

    <form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>





    </div>

  </div>

</form>

CSS:

    .multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;



}



#checkboxes label {

  display: block;





}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

JavaScript:

    var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

Here is the Fiddle

It collapses only when you click on select, the reason could be as it doesn't have any options. Instead, it has an input type.

edited Nov 12 '18 at 20:17

Universal Link

13012

asked Nov 12 '18 at 19:49

sdvadsa

27110

add a comment |

I am working on custom select drop-down which has check-boxes for multiple selections which I Have got from this question.

The problem is once the drop-down expands, it doesn't collapse as in a regular select box when you click anywhere outside.

HTML:

    <form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>





    </div>

  </div>

</form>

CSS:

    .multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;



}



#checkboxes label {

  display: block;





}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

JavaScript:

    var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

Here is the Fiddle

It collapses only when you click on select, the reason could be as it doesn't have any options. Instead, it has an input type.

edited Nov 12 '18 at 20:17

Universal Link

13012

asked Nov 12 '18 at 19:49

sdvadsa

27110

add a comment |

I am working on custom select drop-down which has check-boxes for multiple selections which I Have got from this question.

The problem is once the drop-down expands, it doesn't collapse as in a regular select box when you click anywhere outside.

HTML:

    <form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>





    </div>

  </div>

</form>

CSS:

    .multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;



}



#checkboxes label {

  display: block;





}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

JavaScript:

    var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

Here is the Fiddle

It collapses only when you click on select, the reason could be as it doesn't have any options. Instead, it has an input type.

edited Nov 12 '18 at 20:17

Universal Link

13012

asked Nov 12 '18 at 19:49

sdvadsa

27110

I am working on custom select drop-down which has check-boxes for multiple selections which I Have got from this question.

The problem is once the drop-down expands, it doesn't collapse as in a regular select box when you click anywhere outside.

HTML:

    <form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>





    </div>

  </div>

</form>

CSS:

    .multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;



}



#checkboxes label {

  display: block;





}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

JavaScript:

    var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

Here is the Fiddle

It collapses only when you click on select, the reason could be as it doesn't have any options. Instead, it has an input type.

javascript jquery html css

edited Nov 12 '18 at 20:17

Universal Link

13012

asked Nov 12 '18 at 19:49

sdvadsa

27110

edited Nov 12 '18 at 20:17

Universal Link

13012

asked Nov 12 '18 at 19:49

sdvadsa

27110

edited Nov 12 '18 at 20:17

Universal Link

13012

edited Nov 12 '18 at 20:17

Universal Link

13012

edited Nov 12 '18 at 20:17

Universal Link

13012

asked Nov 12 '18 at 19:49

sdvadsa

27110

asked Nov 12 '18 at 19:49

sdvadsa

27110

asked Nov 12 '18 at 19:49

sdvadsa

27110

add a comment |

1 Answer
1

active

oldest

votes

Add an event listener for click on the document. Then within that listener, check to see if the click happened on the dropdown or on the options, if so, do nothing(so the user can still open the dropdown and select options), otherwise hide the options:

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269131%2fcollapse-dropdown-of-select-box%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

add a comment |

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

add a comment |

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

var expanded = false,

    checkboxes = document.getElementById("checkboxes");



function showCheckboxes() {

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}



document.addEventListener("click", function(event) {

  // If click on dropdown/options do nothing

  if (event.target.closest(".selectBox, #checkboxes")) return;

  // Otherwise hide the options

  checkboxes.style.display = "none";

});

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

  height: 100px;

 

}



#checkboxes label {

  display: block;

  

  

}



#checkboxes label:hover {

  background-color: #1e90ff;

}



.caret {

    border-top: 4px solid #919da9;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

                <span class="caret"> </span>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>



  

    </div>

  </div>

</form>

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

answered Nov 12 '18 at 20:26

APAD1

10.1k52960

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu