Kategorien
WordPress-Tipps

Der perfekte Accordion-Effekt mit jQuery

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:

  1. 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.
  2. 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 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:

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

  1. geschlossen (Button) – nur der Titel wird angezeigt
  2. offen (Content und On) – Titel und der Content wird angezeigt
  3. 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:

Spoiler

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

[collapse]

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.

  1. Der Titel wird in ein div-Container namens accordionButton gesteckt.
  2. 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:

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
Spoiler

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'
));

[collapse]

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

Spoiler

.accordionContent {
display: block !IMPORTANT;
}

[collapse]

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 Antworten auf „Der perfekte Accordion-Effekt mit jQuery“

Schreibe einen Kommentar

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