30. April 2009

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;}

Datum: Donnerstag, 30. April 2009 9:27
Trackback: Trackback-URL
Themengebiet: Template-Design
Feed zum Beitrag: RSS 2.0
Diesen Artikel kommentieren

Eine Antwort zu “Sidebar dynamisch ein- und ausblenden”

  1. Spielmatz sagt:

    Nette Spielerei!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

TYPO3 Internetagentur Dresden