CODEWITHSUNDEEP
jquerycss
Markeee
Markeee

Reputation: 573

Two fullscreen menus - how to show one and hide the other - using toggleclass

I'm using jquery toggleclass to show and hide a fullscreen menu. The problem arises because there are two fullscreen menus. If one is open, how do I hide it if the user clicks on the other one?

I'm guessing I need to toggle the show/hide class on both divs. So when one is 'show' the other is 'hide'. But how do I do this? I've worked out how to toggle a class on one div, but not two.

https://jsfiddle.net/facnr6f9/

$(document).ready(function(){
	$(".projects_link").click(function(){
		$(".projects_overlay").toggleClass("show_projects");
	});
});

$(document).ready(function(){
	$(".menu_link").click(function(){
		$(".menu_overlay").toggleClass("show_menu");
	});
});
.projects_overlay {
display: none;
}
.show_projects {
display: block;
position: fixed;
top: 7.2rem;
left: 0;
width: 100%;
bottom: 0;
background-color: pink;
}
.menu_overlay {
display: none;
}
.show_menu {
display: block;
position: fixed;
top: 7.2rem;
left: 0;
width: 100%;
bottom: 0;
background-color: pink;
}
<span class="projects_link">PROJECTS</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span class="menu_link">MENU</span>
<div class="projects_overlay">
  <ul>
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
    <li>Project 4</li>
    <li>Project 5</li>
  </ul>
</div>
<div class="menu_overlay">
  <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
  </ul>
</div>

Upvotes: 1

Views: 50

Answers (1)

Curtis
Curtis

Reputation: 103348

Ensure that the class is removed from the other menu when one is selected.

For example:

$(".menu_link").click(function(){
    $(".projects_overlay").removeClass("show_projects");
    $(".menu_overlay").toggleClass("show_menu");
});

https://jsfiddle.net/facnr6f9/1/

Upvotes: 1

Related Questions