Changing behavior of dropdown animation when clicking through dropdown buttons

Question

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

Answer 1

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.