Toggle Multiple Elements: If One Opens, Close the Other

JavaScript
1

I have two elements that are triggered by its own toggle menu link. Inside these elements also has a ‘Close’ button to close its own element.

Menu Toggle Links.

<div class="col-sm-3 accntmenu">
    <a class="butmore2">Log In</a> <a class="butmore">Sign Up</a>
 </div>

The code I’m using allows for each element to be open/closed by their respective links. The problem is that if one element is open, I need the other to close automatically. Any idea how I can modify my code to allow for that?

jQuery(function() {
    jQuery(".butmore").on("click", function(){ // button link class 
        jQuery(this).toggleClass('active'); // assign active class to button link
        jQuery("header.site-header").toggleClass('fl', function() {
            jQuery(".site-content").toggleClass('nopad');
        });
        jQuery( ".top" ).slideToggle( "fast", function() { // load element that is triggered by .butmore button
        });
    });
    jQuery(".butmore2").on("click", function(){ // other class link
        jQuery(this).toggleClass('active');  // assign active class to button link
        jQuery("header.site-header").toggleClass('fl', function() {
            jQuery(".site-content").toggleClass('nopad');
        });
        jQuery( ".top2" ).slideToggle( "fast", function() { // load element that is triggered by .butmore2 button
        });
    });
});
2

I’m sure that one of the JS experts will jump in and tidy this up but I’m guessing something like this is what you are looking for,

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.active {
	background:red
}
.login-sign {
	padding:10px;
	background:blue;
	border:1px solid #000;
	color:#fff;
}
</style>
</head>

<body>

<div class="col-sm-3 accntmenu"> <a href="#top" class="butmore">Log In</a> <a href="#top2" class="butmore">Sign Up</a> </div>

<div id="top" class="login-sign top">Log In Section</div>
<div id="top2" class="login-sign top2">Sign In Section</div>

<header class="site-header">
  <h1>Site Header</h1>
</header>
<div class="site-content">
  <p>Site content</p>
</div>


<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script> 
<script>
jQuery(".login-sign").hide();
jQuery(function() {
    jQuery(".butmore").on("click", function(){  
        var activeEl = jQuery(this).attr("href");
			
		 if (jQuery(activeEl).is(':visible')) {
            jQuery(activeEl).slideUp( "fast", function() {});
			jQuery(".butmore").removeClass('active');
			jQuery("header.site-header").removeClass('fl');
			jQuery(".site-content").removeClass('nopad');
        } else {
			jQuery(".login-sign").hide();
           	jQuery(activeEl).slideDown( "fast", function() {});
			jQuery(this).addClass('active');
			jQuery("header.site-header").addClass('fl');
			jQuery(".site-content").addClass('nopad');
        }
        return false;
    });
});
</script>
</body>
</html>

I’m sure that code could be condensed considerably.

1 Like
3

This is great, PaulOB. The appearance and closure of the menu items are working great!

I’ve added a modification for my footer menu since every time the links were clicked, they wouldn’t scroll to the top of the page:

jQuery(function() {
    jQuery(".butmore").on("click", function(){  
        var activeEl = jQuery(this).attr("href");
			
		 if (jQuery(activeEl).is(':visible')) {
            jQuery(activeEl).slideUp( "slow", function() {
				 jQuery('html, body').animate({
    				scrollTop: jQuery(this).offset().top 
    			  }, 200); 
				
				});
			jQuery(".butmore").removeClass('active');
			jQuery("header.site-header").removeClass('fl');
			jQuery(".site-content").removeClass('nopad');
        } else {
			jQuery(".login-sign").hide();
           	jQuery(activeEl).slideDown( "slow", function() {
				jQuery('html, body').animate({
    				scrollTop: jQuery(this).offset().top 
    			  }, 200); 
				
				
				});
			jQuery(this).addClass('active');
			jQuery("header.site-header").addClass('fl');
			jQuery(".site-content").addClass('nopad');
        }
        return false;
    });
});

Thank you!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.