JavaScript
Article

JQUERY OPTIONS SLIDER / BUTTON ANIMATION

By Sam Deering

jQuery code snippet to make an options bar slider which can be toggled up and down to show options for a tool or such. It changes the arrow image when the animation ends.

Online Demo

/*OPTIONS SLIDER / BUTTON ANIMATION -----------------*/
	var optionsToggleBtn = $('#options_btn');
	var buttonState = 1; //open
	optionsToggleBtn.live('click', function(){
		$('#options').slideToggle('slow' , function(){
			if (buttonState == 1) {
				buttonState = 0;
				$('#arrowoptionstoggle').attr('src','images/down-arrow.png');
			} else { 
				buttonState = 1;
				$('#arrowoptionstoggle').attr('src','images/up-arrow.png');
			}
		});
	});
  • http://www.homepage-individuell.de thomas108

    Hi, the link to the online demo is wrong. It currently goes to the json tree viewer.

  • jquery4u

    Hi Thomas, Yes this is the correct demo. The options toolbar can be opened and closed using the green arrow on the right of the JSON Tree Viewer. Cheers. Sam

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.