title: Mega Drop Down Menu
body: <p>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.</p>
  
  <p><a href="http://codepen.io/SurajVerma/pen/uvtfi" rel="nofollow">Codepen link for Mega Menu</a></p>
  
  <p>Any help would be appreciated. Thanks a ton in advance.</p>
  
  <pre><code>$(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");
  })
  })
  </code></pre>
  
  <p>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.</p>