Mega Drop Down Menu

Question

I have created a Mega Menu, and I am not proficient in javascript/jquery. I have applied .slideToggle to bring out the dropdown on click. I want to close the first drop-down automatically if someone clicks on the second drop-down while bringing the 2nd drop-down. I tried Google before asking here. Below is the script I used as well as the link to Codepen.

Codepen link for Mega Menu

Any help would be appreciated. Thanks a ton in advance.

$(function(){
$(".about").click(function(){
    $(".mainSub").slideToggle("slow");
    $(".one").toggleClass("aboutClick");       
})
$(".hf").click(function(){
    $(".hfnav").slideToggle("slow");
    $(".two").toggleClass("aboutClick");
})
$(".cntct").click(function(){
    $(".three").toggleClass("aboutClick");
})
})

Edit: I want the About Us drop-down to close if someone clicks on Housing Finance, and the content of Housing finance drop-down should come up.

Answer 1

I think based on your codepen link, you're looking for

$(function(){
    $(".about").click(function(){
        $(".mainSub").slideToggle("slow");
        $('.mainNavSub>*').removeClass('aboutClick');
        $(".one").addClass("aboutClick");       
    });
    $(".hf").click(function(){
        $(".hfnav").slideToggle("slow");
        $('.mainNavSub>*').removeClass('aboutClick');
        $(".two").addClass("aboutClick");
    });
    $(".cntct").click(function(){
        $('.mainNavSub>*').removeClass('aboutClick');
        $(".three").addClass("aboutClick");
    });
});

It removes the class from the other objects and adds the class to the current object.

Answer 2

I think this should do it.

var mainSubs = $(".mainNavSub > li .mainSub");
$(function(){
$(".mainNav").on("click", ".mainNavSub > li", function() {
  var self = $(this),
      currentSub = self.find(".mainSub");

  if(currentSub.is(":visible")) {
    mainSubs.slideUp("slow");
  } else {
    $.when(mainSubs.slideUp("slow"))
     .then(function() {
       currentSub.slideDown("slow");
    });
  }
});
});