Stupid Simple jQuery Accordion
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 Verü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 Dateijavascript.js.
Diese Script-Datei in den Theme-Ordner einü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:
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:
.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 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="https://blog.funkygog.de/hoerspiele/prof-van-dusen/">Prof. Van Dusen</a></li>
<li><a title="Jonas - der letzte Detektiv (Michael Koser)" href="https://blog.funkygog.de/hoerspiele/jonas-der-letzte-detektiv/">Jonas (der letzte Detektiv)</a></li>
<li><a title="Hörspiel Links" href="https://blog.funkygog.de/hoerspiele/">weitere Links</a></li>
</ul>
</div>
Die Sidebar:
Falls das Theme Widgets unterstützt so können diese automatisch „eingeklappt“ angezeigt werden.
Ich habe bei dazu folgendes in die
functions.php eingetragenif ( 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.
Ausdruck
Damit der verborgene Text im Ausdruck erscheint habe in der print.css folgendes hinzugeügt
.accordionContent {
display: block !IMPORTANT;
}
WordPress 3.6
da in dieser Version von WordPress ein Accordion Script für die Menüverwaltung bereits eingebaut ist, kann es zu Konflikten kommen. Durch eine Abfrage lässt sich der Fehler beseitigen. Zur Lösung
meine bisherige Plug-In Lösung für den Accordion-Effekt.
Beide Effekte zusammen vertragen sich übrigens nicht.
3 Kommentare
*wow*! Genau das habe ich die ganze Zeit gesucht!
Danke für die super Erklärung!
Greetz!
[…] Der perfekte Accordion-Effekt mit jQuery Blog […]
Super Anleitung – bei mir hat es leider so nicht funktioniert, habe es so gelöst:
http://www.web-toolbox.net/webtoolbox/diverses/text-expand/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!