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