SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using JS to make my code smarter

    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:
    Code JavaScript:
    // 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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See how this goes for you

    Code JavaScript:
    $(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);
        });
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only does it work perfectly, but it's a study guide for me. Thank you very much for your help.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •