I have mega menu who need to show and hide submenus in 3 layers.
When i use jquery toggle it work fine for opening and hiding the second submenu (second column), but when i use the same code for opening and hiding the third submenu (third column) it open but never hide.
Does anyone know what seems to be the problem?
I want to have:
click option 1 => show option 1.1
click option 1.1 => show option 1.1.1
second click option 1 => hide option 1.1 and option 1.1.1
second click option 1.1 => hide option 1.1.1
html code:
<div>
<!-- FIRST COLUMN -->
<div>
<a class="first-link" href="#">option 1</a>
<a class="second-link" href="#">option 2</a>
</div>
<!-- SECOND COLUMN -->
<div class="submenu-1 option" style="display:none;">
<div>
<a class="submenu-first-element" href="#">option 1.1</a>
</div>
<div>
<a class="submenu-second-element" href="#">option 1.2</a>
</div>
</div>
<div class="submenu-2 option" style="display:none;">
<div>
<a class="submenu-2-first-element">option 1.1</a>
</div>
</div>
<!-- THIRD COLUMN -->
<div class="first-preview hide-div" style="display:none;">
<a>option 1.1.1</a>
</div>
<div class="second-element hide-div" style="display:none;">
<a>option 1.1.2</a>
</div>
<div class="third-element hide-div" style="display:none;">
<a>option 1.2.1</a>
</div>
</div>
jquery code:
//second column
$('.first-link').on('click', () => {
$('.option').hide();
$('.submenu-1').toggle();
});
$('.second-link').on('click', () => {
$('.option').hide();
$('.submenu-2').toggle();
});
//third column
$('.submenu-first-element').on('click', () => {
$('.hide-div').hide();
$('.first-preview').toggle();
});
$('.submenu-first-element').on('click', () => {
$('.hide-div').hide();
$('.second-element').toggle();
});
$('.submenu-second-element').on('click', () => {
$('.hide-div').hide();
$('.third-element').toggle();
});
I guess this is what you expected. Move your divs closer to the parent and with a one-click event you can achieve both.
//second column
$('.first-link').on('click', () => {
//$('.option').hide();
$(".submenu-2").hide();
$('.submenu-1').toggle();
});
$('.second-link').on('click', () => {
//$('.option').hide();
$(".submenu-1").hide();
$('.submenu-2').toggle();
});
//third column
$('.submenu-first-element').on('click', () => {
//$('.hide-div').hide();
$('.first-preview').toggle();
$('.second-element').toggle();
});
//on single click it can be done, no need to repeat the function
//$('.submenu-first-element').on('click', () => {
// $('.hide-div').hide();
//});
$('.submenu-second-element').on('click', () => {
//$('.hide-div').hide();
$('.third-element').toggle();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<!-- FIRST COLUMN -->
<div>
<a class="first-link" href="#">option 1</a>
<a class="second-link" href="#">option 2</a>
</div>
<!-- SECOND COLUMN -->
<div class="submenu-1 option" style="display:none;">
<div>
<a class="submenu-first-element" href="#">option 1.1</a>
</div>
<div class="first-preview hide-div" style="display:none;">
<a>option 1.1.1</a>
</div>
<div class="second-element hide-div" style="display:none;">
<a>option 1.1.2</a>
</div>
<div>
<a class="submenu-second-element" href="#">option 1.2</a>
</div>
<div class="third-element hide-div" style="display:none;">
<a>option 1.2.1</a>
</div>
</div>
<div class="submenu-2 option" style="display:none;">
<div>
<a class="submenu-2-first-element">option 1.2</a>
</div>
</div>
<!-- THIRD COLUMN -->
</div>The problem is, you are hiding your options before doing the toggle. Take this for an example:
$('.first-link').on('click', () => {
$('.option').hide();
$('.submenu-1').toggle();
});
First Click
1.1. Hide all divs with class name option.
1.2. Toggle submenu-1, i.e. show (because you hide it in step 1.1.
Second Click
2.1. Hide all divs with class name option.
2.2. Toggle submenu-1 i.e. show, again because you hide it in step 2.1.