Develop Reference

call a function when slideDown or slideUp effect has finished

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();
}
});
});

Changing behavior of dropdown animation when clicking through dropdown buttons

My dropdown menu currently works fine, but is there a way to change the behavior of the animation if another button on a dropdown menu is clicked.
For example, clicking on a menu button drops down a menu, but while that menu is open, you click on a second button that instead of dropping down like it normally would if none of the menus were open, slides in from the right while the menu that was previously click slides out to the left. Similar to how theverge.com dropdown menu acts.
<div class="menu1">
<div class="menu1Container"><p class="menu1TextContainer">BUTTON1</p></div>
<div id="menu1Dropdown">
</div>
</div>
This is just the basic structure of each menu, which counts up.
Furthermore, this is the jquery that initiates the dropdown
$(function() {
// Dropdown toggle
$('.menu1Container').click(function(){
$(this).next('#menu1Dropdown').slideToggle(100);
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
$('#menu1Dropdown').slideUp(100);
}
});
});
https://jsfiddle.net/9j3k61rg/8/
thanks

You would need to just set up a condition around your animations that looks to see if the other menu is open. Something like this:
if ($(".menu1Dropdown").css("display") == 'none') {
// do my normal animation to menu 2
} else {
// do some other animation to menu 2
}
Also I notice that you're using slideDown animation. There is no slideLeft or slideRight but you can add that sort of functionality with jQueryUI, or you could use CSS transitions and just use Javascript to add and remove classes instead of setting css properties directly.

jquery trouble with not() and dropdown

i have a horizontal list menu which when clicked toggles the visibility of a nested list. the function almost works, i click the menu and the visibility toggles. however, when i click inside the element that has just appeared, the visibility of the nested list reverts back to original state and is hidden. this is a bit difficult when the elements require an interaction (whether it's a form or another menu).
Here's the code i've got so far:
/* menu */
var menu = function(clicktarget, dropdown){
$(clicktarget).click( function(event){
// stop bubbling
event.stopPropagation();
//show
$(dropdown).toggle();
return false;
});
$('body').not($(dropdown)).click( function(){
//hide when click anywhere out the menu
$(dropdown).hide();
return false;
});
}
menu($('#loginAcc'),$('#auth-menu'));
As you can see i have tried using the .not() function in an attempt to remove it, but nothing changes and the dropdown still gets removed when it's clicked.

Try
$('body').click( function(e){
//hide when click anywhere out the menu
var $target = $(e.target)
if(!$target.closest(dropdown).length){
$(dropdown).hide();
}
return false;
});

Clicking on a list item containing sub menu in a drop down menu, closes the rest but doesn't expand the new one

I'm creating a drop down toggling menu but I have one issue that I can't wrap my head around it. Clicking on a list item expands it's sub items, however when a list is expanded, when another one is clicked, the first one contracts as it should but the second one doesn't expand until it's clicked again. How can I solve this issue?
When a list is clicked a class toggled is added to its top parent container so I can create the conditions using jQuery - here is the code:
$('#main-navigation a').click(function (e) {
/* Finding the drop down list that corresponds to the current section: */
var $dropdownMenu = $(this).next();
if ($dropdownMenu.hasClass('sub-menu')) { /* Checking if drop down menu exists for this menu item */
if ($('.nav-menu > li').hasClass('toggled')) { /* There is toggled menu */
if (($(this).parents().hasClass('toggled')) && (!$(this).parent().hasClass('toggled'))) {
// The curent element has only a not-direct parent with "toggled" e.g. the element is deep link!');
$dropdownMenu.slideToggle('fast');
} else {
//If the element is a top link, the class is removed and the lists dissappear
$('li.toggled').removeClass('toggled').children('ul').slideUp('fast');
}
} else {
// If there isn't a toggled menu, the current menu expands and a class is added
$dropdownMenu.slideToggle('fast').parent('.nav-menu > li').addClass('toggled');
}
}
})
The whole HTML, CSS an JS code is here: http://jsfiddle.net/nUrjy/
I am not even sure if this is the best way to do a menu like this one..

Made a little change here: http://jsfiddle.net/JWMarchant/nUrjy/7/
Simplified the code to this:
$('#main-navigation a').click(function (e) {
/* Finding the drop down list that corresponds to the current section: */
var dropdownMenu = $(this).next();
if ($(this).parent('li').children('.sub-menu').length > 0) {
$('.sub-menu').not(dropdownMenu).not(dropdownMenu.parents()).slideUp('fast');
$(dropdownMenu).slideToggle('fast');
}
});

Hide and show menu with the same button using jquery

I have found a tutorial on some dropdown menu using jquery. It works fine but I want to adjust it just a little. Instead of hiding the menu using hovering, I want to have the same button that showed the menu, to hide it when it is being pressed again. So the same button has to both hide and show the dropdown menu.
The script that im using:
$(document).ready(function () {
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function () { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});

Use jQuery's .toggle() http://api.jquery.com/toggle/
$("#yourbutton").click(function() {
$("#yourmenu").toggle();
});

You can save yourself from adding a CSS rule by using jQuery's .toggle method.
$('#yourMenu').toggle()
This will hide it if it's visible, and show it if it's hidden. You can add a number or 'fast', 'slow' as a parameter to make it animate.

jQuery.toggle() function will do this work for you:
$("#button").on('click', function() {
$("#menu").toggle();
});

Yes, toggleClass can be used. Or you can also define your own toggle function in javascript.
you can toggle between the classes or do any other function you want to.
function tog(elemen){
if(elemen.className == "show") {
hide drpdwn
elemen.className="hide";
} else {
make dropdwn visible
elemen.className="show";
}
}