Reputation: 1747
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
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