I'm having some trouble with my dropdown menu. When I click on the button to open it, everything works fine. But when I try to close it by clicking again, the menu glitches and sometimes won't close at all. Here's the HTML code I'm using:
<div class="col-md-4 dropdown"><h2 class="dd_text">Vegetables</h2>
<div class="btn-group" id="mydropdown">
<button style="font-size:24px" class="btn btn-light btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img align="left" src="vegetables.jpg" class="image_on_dd"></img></button>
<div class="dropdown-menu force-scroll" aria-labelledby="dropdownMenuButton">
<label class="pure-material-checkbox">
<input type="checkbox" name="brinjal" value="brinjal"/><span>Brinjal</span></label>
<label class="pure-material-checkbox">
<input type="checkbox" name="potato" value="potato"/><span>Potato</span></label>
<label class="pure-material-checkbox">
<input type="checkbox" name="tomato" value="tomato"/><span>Tomato</span></label>
<label class="pure-material-checkbox">
<input type="checkbox" name="capsicum" value="capsicum"/><span>Capsicum</span></label>
<label class="pure-material-checkbox">
<input type="checkbox" name="onion" value="onion"/><span>Onion</span></label>
Here is my CSS code:
.btn{
margin-left:30px;
background: white;
border-color:white;
width:300px;
}
.btn:hover{
background: white;
border-color:white;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu{
width:100%;
}
.force-scroll{
overflow-y: scroll;
width:300px;
}
.dropdown-menu{
transform: translate3d(0px, 85px, 0px)!important;
}
What I'm getting as a result can be seen here: https://i.sstatic.net/Yy26Q.png
My ultimate goal is to have the dropdown menu close when I double-click the button and open when I single-click it. Is this achievable? Can anyone offer any guidance on how to fix this issue?