Using JS to make my code smarter

JavaScript
1

Hello,

I have a simple animated menu here that does what it needs to. But I know (in an embarrassing newbie way) the code could be much smarter. I have tried using $(this) and then trying to find the other elements, but I can’t get anything else working. Here’s the snippet of the first few menu items:

// BENEFITS
	$("#benefits-button").click(function(){
			$("#benefits-button").addClass("active");
			$("#features-button").removeClass("active");
			$("#advantages-button").removeClass("active");
			$("#demos-button").removeClass("active");
			$("#clients-button").removeClass("active");
			$("#about-button").removeClass("active");
			benefits_one();
	});
	function benefits_one(){
		$('#features').stop().animate({left:"-130px"}, 500);
		$('#advantages').stop().animate({left:"-130px"}, 500);
		$('#demos').stop().animate({left:"-130px"}, 500);
		$('#clients').stop().animate({left:"-130px"}, 500);
		$('#about').stop().animate({left:"-130px"}, 500, function(){
			benefits_two();
		})
	}
	function benefits_two(){
		$('#benefits').stop().animate({left:"130px"}, 500);
	}
	
// FEATURES
	$("#features-button").click(function(){
		$("#features-button").addClass("active");
		$("#benefits-button").removeClass("active");
		$("#advantages-button").removeClass("active");
		$("#demos-button").removeClass("active");
		$("#clients-button").removeClass("active");
		$("#about-button").removeClass("active");
		features_one();
	});
	function features_one(){
		$('#benefits').stop().animate({left:"-130px"}, 500);
		$('#advantages').stop().animate({left:"-130px"}, 500);
		$('#demos').stop().animate({left:"-130px"}, 500);
		$('#clients').stop().animate({left:"-130px"}, 500);
		$('#about').stop().animate({left:"-130px"}, 500, function(){
			features_two();
		})
	}
	function features_two(){
		$('#features').stop().animate({left:"130px"}, 500);
	}
	
// ADVANTAGES
	$("#advantages-button").click(function(){
		$("#advantages-button").addClass("active");
		$("#benefits-button").removeClass("active");
		$("#features-button").removeClass("active");
		$("#demos-button").removeClass("active");
		$("#clients-button").removeClass("active");
		$("#about-button").removeClass("active");
		advantages_one();
	});
	function advantages_one(){
		$('#benefits').stop().animate({left:"-130px"}, 500);
		$('#features').stop().animate({left:"-130px"}, 500);
		$('#demos').stop().animate({left:"-130px"}, 500);
		$('#clients').stop().animate({left:"-130px"}, 500);
		$('#about').stop().animate({left:"-130px"}, 500, function(){
			advantages_two();
		})
	}
	function advantages_two(){
		$('#advantages').stop().animate({left:"130px"}, 500);
	}

and on an on for a few more buttons. Any idea how I could target one element, then target all the rest?

2

See how this goes for you

$(function() {
    var $btn = $('.button');
    
    $btn.click(function() {
        // Remove and add the "active" class
        $btn.removeClass('active');
        $(this).addClass('active');
        
        // Get the id we need to open the group box for this selection
        var ele = $(this).attr('id').split('-');
        
        // Hide any group box that is currently open
        $('.group').stop().animate({
            left : '-130px'
        }, 500);
        
        // Open the menu associated with the current selection
        $('#' + ele[0]).stop().animate({
            left : '130px'
        }, 500);
    });
});
3

Not only does it work perfectly, but it’s a study guide for me. Thank you very much for your help.

4

No problem