Riddhi Dua
Reputation: 91
how to make one dropdown close after clicking the other dropdown
function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById(list + '_items');
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
} else {
items.classList.add('visible');
items.style.display = "block";
}
};
$('html').click(function() {
$('#list1_items').hide();
});
$('#list1').click(function(event) {
event.stopPropagation();
});
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event) {
event.stopPropagation();
});.dropdown-check-list {
display: inline-block;
padding: 5px;
height: 50px;
overflow-y: auto;
z-index: 999;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
min-width: 100%;
z-index: 999;
box-sizing: border-box;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
position: absolute;
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
z-index: 999;
background: white;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list1" class="dropdown-check-list" tabindex="1">
<span class="anchor" onclick="getElements('list1')">Select Months</span>
<ul id="list1_items" class="items" name="month">
<li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
</ul>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<ul id="list2_items" class="items" name="quarter">
<li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
<li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
<li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
<li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
</ul>
</div>My html is :
<div id="list1" class="dropdown-check-list" tabindex="1">
<span class="anchor" onclick="getElements('list1')">Select Months</span>
<ul id="list1_items" class="items" name="month">
<li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
</ul>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<ul id="list2_items" class="items" name="quarter">
<li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
<li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
<li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
<li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
</ul>
</div>
My CSS is:
.dropdown-check-list {
display: inline-block;
padding: 5px;
height: 50px;
overflow-y: auto;
z-index: 999;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
min-width: 100%;
z-index: 999;
box-sizing: border-box;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
position: absolute;
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
z-index: 999;
background: white;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: inline-block;
}
My JS is :
<script>
function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById(list + '_items');
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
} else {
items.classList.add('visible');
items.style.display = "block";
}
};
</script>
<script>
$('html').click(function() {
$('#list1_items').hide();
});
$('#list1').click(function(event){
event.stopPropagation();
});
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event){
event.stopPropagation();
});
</script>
But according to this both of my dropdowns open, but I want to close when the user opens the other one, so it should work in a way that when the user is completed checkboxing in the first dropdown and clicks the other one the first one auto closes.
Please help me out. Thank You.
Upvotes: 0
Views: 83
Answers (3)
Crafted Pod
Reputation: 522
As an alternative solution, we could replace the entire script to use the below JQuery events and selectors.
This would allow us to add multple dropdowns to our page.
We will need to attach the .dropdown-check-list to all our dropdowns. The trigger element will need the class .anchor and the items list will need the class .items
var $dropdowns = $(".dropdown-check-list");
$("html").click(function () {
$dropdowns.find(".items").hide();
});
$dropdowns.on("click", ".anchor, .items", function (ev) {
ev.stopPropagation();
if (ev.target.className == "anchor") {
$(this).next(".items").toggle();
$dropdowns.not(ev.delegateTarget).find(".items").hide();
}
});.dropdown-check-list {
display: inline-block;
padding: 5px;
height: 50px;
overflow-y: auto;
z-index: 999;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
min-width: 100%;
z-index: 999;
box-sizing: border-box;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
position: absolute;
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
z-index: 999;
background: white;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-check-list">
<span class="anchor">Select Months</span>
<ul class="items" name="month">
<li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
</ul>
</div>
<div class="dropdown-check-list">
<span class="anchor">Select Quarter</span>
<ul class="items" name="quarter">
<li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
<li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
<li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
<li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
</ul>
</div>Upvotes: 1
JOCKEY
Reputation: 53
Put all dropdown ID in divArr array then add onClick="hideShow('id_of_element_to_show')" in the division that you're clicking when you want to hide/show it.
For example:
<span class="anchor" onclick="hideShow('list1_items')">Select Quarter</span>
<ul id="list1_items" class="items" name="month">
<span class="anchor" onclick="hideShow('list2_items')">Select Months</span>
<ul id="list2_items" class="items" name="quarter">
var divArr = ['list1_items','list2_items']
function hideShow(elem){
if (divArr.length!=0) {}
for(var i =0; i < divarr.length; i++){
if (divArr[i] == elem) {
document.getElementById(elem).style.display = "block"
}else{
document.getElementById(elem).style.display = "none"
}
}
}
Upvotes: 1
Matt
Reputation: 5428
Making the smallest change possible to your code, I simply hide the other list on click.
function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById(list + '_items');
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
} else {
items.classList.add('visible');
items.style.display = "block";
}
};
$('html').click(function() {
$('#list1_items').hide();
});
$('#list1').click(function(event) {
event.stopPropagation();
$('#list2_items').hide();
});
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event) {
event.stopPropagation();
$('#list1_items').hide();
});.dropdown-check-list {
display: inline-block;
padding: 5px;
height: 50px;
overflow-y: auto;
z-index: 999;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
min-width: 100%;
z-index: 999;
box-sizing: border-box;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
position: absolute;
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
z-index: 999;
background: white;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list1" class="dropdown-check-list" tabindex="1">
<span class="anchor" onclick="getElements('list1')">Select Months</span>
<ul id="list1_items" class="items" name="month">
<li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
</ul>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<ul id="list2_items" class="items" name="quarter">
<li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
<li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
<li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
<li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
</ul>
</div>Upvotes: 3
Related Questions
- Close dropdown on click
- when click on the one dropdown other dropdown will be close
- Close dropdown menu when clicked on different dropdown
- Close Dropdown when another Dropdown is opened
- Close dropdown upon clicking another
- When User Open One DropDown Close Other DropDowns
- Close the dropdown menu if the user clicks on the second dropdown link
- Close other dropdown on click
- Open one drop-down, close another with JavaScript
- How do I make opening one dropdown close the other one?