Luke G
Luke G

Reputation: 1747

JQuery, Accordion & multiple menus

I am using combination of the Wayfinder and Accordion menu to drive behaviour of the left column menu. This menu has two levels, i.e.:

<ul class="accordion">:
Menu 1
    Sub-menu 1.1
    Sub-menu 1.2    
    Sub-menu 1.3
Menu 2
    Sub-menu 2.1
    Sub-menu 2.2    
Menu 3
    Sub-menu 3.1
    Sub-menu 3.2    
Menu 4
    Sub-menu 4.1
    Sub-menu 4.2    

There is also the following header menu:

<ul class="nav"> (no sub-menus):
Menu 2
Menu 3

The below code handles the left column menu ("accordion" class). I would like extend the code, so clicking on 'Menu 2' from the header menu ("nav" class) would have the very same effect as clicking on the 'Menu 2' ("accordion" class). I.e. clicking on the 'Menu 2' ("nav" class) would expand 'Menu 2' with "accordion" class.

Hers is the code:

<script type="text/javascript">

    $(document).ready(function() {

        // Store variables

        var accordion_head = $('.accordion > li > a'),
            accordion_body = $('.accordion li > .sub-menu'),
            nav_head = $('.nav > li > a');

        // Open the first tab on load

        accordion_head.eq(2).addClass('active').next().slideDown('normal');         

        // Click function

        accordion_head.on('click', function(event) {

            // Disable header links

            event.preventDefault();

            // Show and hide the tabs on click

            if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
            else {
                    accordion_body.slideUp('normal');
                    accordion_head.removeClass('active');
                }
        });
        nav_head.on('click', function(event) {

            // Disable header links

            event.preventDefault();

            // Show and hide the 'accordion tabs' on click on the 'nav tabs'

            <missing part>

        });
    });
</script>

Many thanks, LG

Upvotes: 0

Views: 758

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206595

Target the index of the clicked parent element as long they are in the same order (after the home button)

$(function(){

  var accordion_head = $('.accordion > li > a'),
      accordion_sub  = $('.accordion li > .sub-menu'),
      nav_head       = $('.nav > li > a'); 

  accordion_head.not('.active').on('click', function(e){
      e.preventDefault();
      if (!$(e.target).hasClass('active')){
          $('.accordion > li > a').removeClass('active');
          accordion_sub.slideUp();
          $(this).addClass('active').closest('li').find('.sub-menu').slideDown();    
     }
  });

  nav_head.on('click', function(e){
      e.preventDefault();
      $('.accordion > li').eq( $(this).closest('li').index() ).find('a').click();
  });

});

Upvotes: 1

Related Questions