CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Megan McGowan
Megan McGowan

Reputation: 57

Close submenu with active class

so I have this dropdown menu on tablet and mobile resolution that is used to change the content below the menu. I have everything working except I cannot get the setup section to close when I click on the web apps link. I am trying to use the active class to open/close the menu but I must be missing something. My project can be viewed on codepen here

Or here is the snippet

(function($) {
  
  $(document).foundation();

$('.js-toggle-menu').click(function(e){
  e.preventDefault();
  $('.mobile-header-nav').slideToggle();
  $(this).toggleClass('open');
});
$('.js-toggle-sub, .subnav li a').click(function(e){
  $('.mobile-header-subnav').slideToggle();
  $(this).toggleClass('open');
});

$('.sub-toggle').click(function(e){
  $('li a').removeClass("active");
  $(this).addClass("active");
  $(this).next('.subnav').slideToggle();
  $(this).toggleClass('open');
});

function handleMenuClick(e){
  e.stopPropagation();
  $('.newContent').html($($(this).attr("href")).html());
}
$("ul.mobile-header-subnav").on("click", ".subnav li a",handleMenuClick);


function tabMenuClick(e){
  e.stopPropagation();
  $('.newContent').html($($(this).attr("href")).html());
}
$(".vertical-links").on("click", ".vertical-tab-links li a",tabMenuClick);

$('.vertical-links li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});

$('.subnav li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
var mobileTabsInitialState = true;
$(window).resize(function() {
  if(mobileTabsInitialState && !Foundation.utils.is_large_up()) {
    $('.mobile-header-subnav a').eq(0).click();
    mobileTabsInitialState = false;
  }
});  
}(jQuery));
  <body class="theme-carrot">
    

    
   
        <div class="row full-width">
         
    <div class="large-12 show-for-large-up columns nav-bar">
    <nav class="main-nav">
    <ul class="left">    
    
        <li><h1>Cloud</h1></li>
    </ul>    
    <ul class="right">
        <li><a href="#">Products</a></li>
        <li><a href="#">Learn</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Support</a></li>
        <li class="cta"><a href="#" class="button">TRY NOW</a></li>
    </ul> 
    </nav>    
    </div> 
      
            <div class="small-12 hide-for-large-up columns small-nav">
          
            <h3>Cloud</h3>
            <nav class="mobile-nav-wrap" role="navigation">
    <ul class="mobile-header-nav">
      <li><a href="#">Products</a></li>
      <li><a href="#">Learn</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Support</a></li>
      <li class="divide"><a href="#">Login</a></li>
      <li><img class="search" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-184/search.svg"><a href="#">Search</a></li>    
      <li><a href="#" class="button">TRY NOW</a></li>
    </ul>
  </nav>

  <a class="mobile-menu-toggle js-toggle-menu hamburger-menu" href="#">
    <span class="menu-item"></span>
    <span class="menu-item"></span>
    <span class="menu-item"></span>
  </a> 
            </div>
            
        </div>
        <div class="row">
    <div class="small-12 columns start"> 
    <h2>Get started</h2>
    <p>Lorem ipsum dolor sit amet, ipsum a egestas vel. Nonummy semper sed id tempus. Netus curabitur et diam bibendum urna, vivamus in et sit vulputate libero, erat nostra a. Ipsum nec et lacus non, facilisis morbi gravida viverra iaculis in, elit curabitur amet quisque placerat sed diam, facilisi nulla non at montes, feugiat est. Commodo suspendisse mollis vivamus at, rutrum varius. </p>    
    </div>
        </div> 
      
      <div class="row">
          <div class="row tabsContainer">

<div class="large-4 columns show-for-large-up">
<nav class="vertical-links" role="navigation">
<ul class="vertical-tab-links">
<li class="category"><h6>Setup</h6></li>
<li><a class="active" href="#panel11">How to setup my account</a></li> 
<li><a href="#panel21">How to setup first database</a></li> 
<li class="category"><h6>Web Apps</h6></li>
<li><a href="#panel31">How to create a web app</a></li> 
<li><a href="#panel41">How to integrate an app</a></li>    
</ul>    
</nav>              
</div>              
              
<div class="small-12 columns hide-for-large-up secondnav">
   
  <a class="mobile-submenu-toggle js-toggle-sub button" href="#">
   Get Started
  </a>
    
  <nav class="mobile-subnav-wrap" role="navigation">
    <ul class="mobile-header-subnav">
      <li>
        <a href="#" class="sub-toggle active">Setup</a>
        <ul class="subnav">
          <li><a class="active" href="#panel11">How to setup my account</a></li>
          <li><a href="#panel21">How to setup first database</a></li>
        </ul>
      </li>
      <li><a class="sub-toggle" href="#">Web apps</a>
        <ul class="subnav">
          <li><a href="#panel31">How to create a web app</a></li>
          <li><a href="#panel41">How to integrate an app</a></li>
       
        </ul>
      </li>
    </ul>
  </nav>              
</div>

<div class="small-12 large-8 columns">    
<div class="mainContent">
  <div class="content active" id="panel11">
      
      <h3>How to setup my account</h3>
      <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
        <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p>
      </div>

  <div class="content" id="panel21">
      <h3>How to setup first database</h3>
      <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
        <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p>
       
  </div>
  <div class="content" id="panel31">
      <h3>How to create a web app</h3>
      <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
        <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p>
  </div>
  <div class="content" id="panel41">
     <h3>How to integrate an app</h3>
      <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
        <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p>
  </div>
    <div class="clearfix"></div>
</div>
    <div class="newContent">
     <h3>How to setup my account</h3>
      <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
        <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p>
</div>
      </div>
      </div>
      </div>
          
          
     
  </body>

Upvotes: 0

Views: 87

Answers (1)

1cgonza
1cgonza

Reputation: 1588

You could use the jQuery's slideUp() like this:

$('.sub-toggle').click(function(e) {
  e.preventDefault();
  $('li a').removeClass("active");
  $(this).addClass("active");
  $('.subnav').slideUp(); // <- Slide up all .subnav before opening new one.
  $(this).next('.subnav').slideToggle();
  $(this).toggleClass('open');
});

Upvotes: 1

Related Questions