Der perfekte Accordion-Effekt mit jQuery

Datum: 19.06.10 | | Trackback

Stupid Simple jQuery Accordion Menu
Eine perfekte Lösung für den Accordion-Effekt ist das jQuery Script von Stemkoski
Der Einbau geht leicht von der Hand und der Effekt lässt sich einfach in Beiträgen einarbeiten.

Der Einbau:

folgende Code Zeile in den Header (oder alternativ im Footer) einsetzen:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Dadurch wird das jQuery-Script von google zur Verfügung gestellt. Alternativ auch als download bei jQuery möglich.
Zusätzlich noch von Stemkoski die Zip-Datei downloaden.
In dem Ordner “includes” befindet sich die erforderliche Datei javascript.js.
Diese Script-Datei in den Theme-Ordner einfügen. (Zumeist gibt es dort schon ein Ordner für Javascript.)
Bei mir lautet der Pfad:
.../wp-content/themes/funkygog-Theme/js/javascript.js
und auch in die header.php einbinden:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/javascript.js"></script>

Somit ist der Accordion-Effekt im Theme eingebaut und aufrufbar.

Das Styling:

Bei den css-Angaben hat man natürlich freie Hand.
Es gibt folgende drei Zustände:

geschlossen (Button) – nur der Titel wird angezeigt
offen (Content und On) – Titel und der Content wird angezeigt
hover (Over) – wenn man mit der Maus über den Titel geht zum öffnen und schließen.

So habe ich es bei House-of-Chicago.de umgesetzt: anzeigen

.accordionButton {

	cursor: pointer;

	background: #fff url("images/close.gif") center right no-repeat;

	border: 1px solid #ddd;

        margin-bottom:10px;

        padding:5px 15px;

	}

.accordionContent {

	background: #fff;

	}

#sidebar .accordionContent {

	background: transparent;

	}

.on {

	background: #f1fafa url("images/open.gif") center right no-repeat;

	border: 1px solid #ddd;

	}

.over {

        color: #c00;

	background: url("images/hover.jpg") repeat-x scroll left top #FFFFFF;

	border: 1px solid #ccc;

	}

Für die Sidebar habe ich den Background auf transparent gesetzt.

Der Beitrag:

Der große Vorteil bei diesem Script ist die einfache Einbindung in Beiträge.

Der Titel wird in ein div-Container namens accordionButton gesteckt.
Der Inhalt in accordionContent

<div class="accordionButton"><h3>Hörspiele</h3></div> <div class="accordionContent"> <ul> <li><a title="Prof. Van Dusen (Michael Koser)" href="http://blog.funkygog.de/hoerspiele/prof-van-dusen/">Prof. Van Dusen</a></li> <li><a title="Jonas - der letzte Detektiv (Michael Koser)" href="http://blog.funkygog.de/hoerspiele/jonas-der-letzte-detektiv/">Jonas (der letzte Detektiv)</a></li> <li><a title="Hörspiel Links" href="http://blog.funkygog.de/hoerspiele/">weitere Links</a></li> </ul> </div>

Die Sidebar:

Der Code lässt sich auch für die Sidebar verwenden.
Falls das Theme Widgets unterstützt so können diese automatisch “eingeklappt” angezeigt werden.
Ich habe bei dazu folgendes in die functions.php eingetragen anzeigen

if ( function_exists('register_sidebar') )

    register_sidebar(array(

        'before_widget' => '',

        'after_widget' => '</div>',

        'before_title' => '<div class="accordionButton">',

        'after_title' => '</div>

<div class="accordionContent">',

		'name' => 'sidebar'

    ));

Hinweis:
Sollte der Accordion Effekt nicht funktionieren, kann dies an ähnlichen Scripts liegen, die bereits im Theme verwendet werden. (Lightbox u.a.).
Hier empfiehlt es sich den Funktionsaufruf des Scriptes zu ändern.
Vorher:
$(document).ready(function() {
Nachher:
jquery(document).ready(function() {
Vielen Dank an Spontis für den Hinweis.

Damit der verborgene Text im Ausdruck erscheint habe in der print.css folgendes hinzugefügt anzeigen

.accordionContent {

	display: block !IMPORTANT;

}

meine bisherige Plug-In Lösung für den Accordion-Effekt.
Beide Effekte zusammen vertragen sich übrigens nicht.

2 Kommentare für » Der perfekte Accordion-Effekt mit jQuery

intoxi

am So., 31.10.10 [Link]

Super Anleitung – bei mir hat es leider so nicht funktioniert, habe es so gelöst:
www.web-toolbox.net/webtoolb...nd/text-expand.htm
Ergebnis sieht aber finde ich auch ganz anständig aus, anschließend habe ich noch die YARPP-Related Posts angepasst, so dass sie nach den Kommentaren erscheinen und alles in allem gefällt mir die Lösung auch ganz gut :)
Danke für die hilfreichen Tipps!
Hato

am Di., 01.11.11 [Link]

*wow*! Genau das habe ich die ganze Zeit gesucht!
Danke für die super Erklärung!

Greetz!