Sidebar dynamisch ein- und ausblenden
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;}