I have a simple dropdown list, I want when the user toggles the dropdown list to show or hide another div using the jquery method slideToggle, unfortunately, I am struggling to solve the problem.
Expected: when the user clicks an icon it should show the list and hide another div (slideDown effect) when the user clicks again for closing the dropdown list (slideUp effect), I want to show the hidden div.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
console.log('do something')
if("slideDown"){
$('.dezynfekcja-dropdown').hide();
}else if("slideUP"){
$('.dezynfekcja-dropdown').show();
}
});
});
I tried adding a callback function but I don't know how to check the slide effect if it's slideDown or slideUp.
Any idea will be appreciated.
Once toggle finishes it basically hides or shows the element being toggled. So in the complete callback you can simply check if your element is shown or hidden.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
// `this` refers to the DOM element being toggled.
// We can use `is(":visible")` to check if it visible or not
let isVisible = $(this).is(":visible");
// show console message that tells us if element is hidden or visible
console.log(this.innerText, ' is now ', isVisible);
// use isVisible to do whatever you want show/hide etc
if(isVisible) {
$('.dezynfekcja-dropdown').hide();
} else {
$('.dezynfekcja-dropdown').show();
}
});
});