Michael Morgan

For a recent interface design I had to apply a little jQuery to make some of the page interactions more intuitive (and nicer to use). One of the things needed was a quick and easy to way to toggle a particular elements display but in a way so that it faded in and out. The idea was simple – have a class which could be attached to a bunch of anchor tags which when clicked would fade in a div element. Then, upon clicking on that link (or any of the other links which also had the same class) the div element would fade out.

It’s actually quite easy really. Here’s the code for toggling an element on click with jQuery.

1

$('#hiddenbox').animate({opacity: 'toggle'}, 'fast');

To use it simply have an anchor tag like this…

1

<a href="" class="toggle-fade">Toggle box</a>

And then the jQuery code…

1
2
3
4
5
6

$(document).ready(function(){
	$('.toggle-fade').click(function(){
		$('#hiddenbox).animate({opacity: 'toggle'}, 'fast');
		return false;
	});
});

Perfect!