Fancy dropup menue, change icon onclick jquery - html

Question

I want a filter icon which dropup on click and also change icon. In the dropup menu I have checkboxes (They are basically filters). I want dropup to remain open if someone toggle checkboxes but when user click on filter icon (which is now cross icon ) it should close dropup and change its icon back to filter.
I have created drop up and also icon is changed on click, but when someone click on filter menu it closes. I know it is because of toggle function but I don't know how else I can make this work properly.
Also how can I animate this a bit. Would be very appreciative.
.filter {
position: fixed;
left: 20px;
bottom: 40px;
font-size: 40px;
z-index: 1000;
}
.filter-dropup {
position: relative;
display: inline-block;
}
.filter-dropup-content {
display: none;
position: absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 10px;
}
.filter-dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
<div class="filter">
<div class="filter-dropup">
<i class="fas fa-filter filter-icon"></i>
<div class="filter-dropup-content">
<div>
<input type="checkbox" id="scales" name="scales"
checked>
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="scales" name="scales"
checked>
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="scales" name="scales"
checked>
<label for="scales">Scales</label>
</div>
</div>
</div>
$(".filter").click(function () {
$(".filter-icon", this).toggleClass("fas fa-times fas fa-filter");
$(".filter-dropup-content").toggleClass("show", 1000);
});
Here is jsfiddle

Answer 1

First of all, the id and name must be unique, otherwise it always points to the first element that matches the id. I added the handler class to the a label, so that it would work as a button. Sorry about my English, but it's not my native language. jsfiddle I hope I've helped you.
.filter {
position: fixed;
left: 20px;
bottom: 40px;
font-size: 40px;
z-index: 1000;
}
.filter-dropup-content {
display: none;
position: absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 10px;
}
<div class="filter">
<a href="#" class="handler">
<i class="fas fa-filter"></i>
</a>
<div class="filter-dropup-content">
<div>
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="scales_2" name="scales_2" checked />
<label for="scales_2">Scales_2</label>
</div>
<div>
<input type="checkbox" id="scales_3" name="scales_3" checked />
<label for="scales_3">Scales_3</label>
</div>
</div>
</div>
The previous JavaScript closed the menu when you clicked on it, because you were using the .filter container as a button that made everything inside the filter close the menu, since you're using jQuery we can use the fadeToggle function to animate the menu.
$('.handler').on('click', function () {
$(this).find('i').toggleClass('fa-times');
$('.filter-dropup-content').fadeToggle();
});