Close one DIV while opening the other DIV (JQUERY click function)

See more:

Javascript

HTML

jQuery

CSS3

What I am trying to achieve is to close one DIV when other DIV is opened (click open) with JQUERY. I am a beginner in JAVASCRIPT/JQUERY. Following is the HTML structure.

I am also interested to know if, in this case multiple DOM elements can be controlled with a single function.

HTML Structure






Here on clicking the class .region-search and its children, I could get the region-dropdown to slide down. I could also get the company registration model to click open as well. However, when the first DIV is active, when I click the second DIV, the first one remains active. I need to close it. How can I do it?. Please assist me.

I am also trying to use the same JQUERY function to control both DOM. Is it possible? Please advise.

The JQUERY is as follows

$(document).ready(function(){

var $registration_dropdown=$('.company-registration-modal');
var $registration_link=$('.top-register span, .fa-registered');

$registration_dropdown.hide();
$registration_link.on('click touchend', function(event){

var target = $(event.target);

if(target.is($registration_link)){
$registration_dropdown.slideToggle(300);
event.stopPropagation();
}
});

$(document).click(function(e) {
if ($(e.target).closest($registration_dropdown).length===0) {
$($registration_dropdown).slideUp(300);
}
});

$registration_dropdown.mouseleave(function(){
$(this).delay(400).slideUp(300);
});

});


Similarly, I write a different function for the second DIV.

What I have tried:

$(document).ready(function(){

var $registration_dropdown=$('.company-registration-modal');
var $registration_link=$('.top-register span, .fa-registered');

$registration_dropdown.hide();
$registration_link.on('click touchend', function(event){

var target = $(event.target);

if(target.is($registration_link)){
$registration_dropdown.slideToggle(300);
event.stopPropagation();
}
});

$(document).click(function(e) {
if ($(e.target).closest($registration_dropdown).length===0) {
$($registration_dropdown).slideUp(300);
}
});

$registration_dropdown.mouseleave(function(){
$(this).delay(400).slideUp(300);
});

});