sidebar

Header:

var j = jQuery.noConflict();

j(document).ready(function() {

	j("a#toggleSidebar").click().toggle(function(){
		j('#sidebar').animate({
			width: 'hide',
			opacity: 'hide'
		}, 'slow');
		j(this).toggleClass('sidebarcollapse');
		j(this).toggleClass('sidebarexpand');
	}, function(){
		j('#sidebar').animate({
			width: 'show',
			opacity: 'show'
		}, 'slow');
		j(this).toggleClass('sidebarcollapse');
		j(this).toggleClass('sidebarexpand');
	});

});

Content:

<a id="toggleSidebar" class="sidebarexpand" title="ein-/ausblenden" href="#">X</a>

CSS:

#toggleSidebar {margin:1em;float:right;text-decoration:none;width:15px;height:15px;}
    .sidebarcollapse {height:15px;text-align:right;background:url(images/arrow_l.png) no-repeat;}
    .sidebarexpand {height:15px;text-align:right;background:url(images/arrow_r.png) no-repeat;}