Bei dem Projekt auf einer der Seiten sollte ein Akkordeon-Element eingebaut werden und neben dem sollte für das jeweilge Akkordeon-Element ein Bild stehen. Je nachdem, welches Akkordeon-Element aktiv ist, wurde das entsprechende Bild angezeigt. Nach kurzer Online-Forschung haben wir festgestellt, dass keine geeigneten WordPress Plugins, welche genau diese Funktion anbieten, existieren. Die Lösung war, ein der schon vorhandenen Plugins zu verwenden und mittels jQuery den Bild-Wechsel zu animieren. Easy Accordion by ShapedPlugin wurde auf der Seite installiert (Demo: https://shapedplugin.com/demo/easy-accordion-pro/). Die Bilder werden in Adobe Illustrator hochgeladen und in einem Container neben dem Akkordeon eingefügt.

 

Das Skript lautet:

 

jQuery(function() {

        jQuery(".single_accordion").click(function() {              

               var accLen = jQuery(this).prevAll(".single_accordion").length;

               var accLen1 = accLen  + 1;

               console.log(accLen1);

               jQuery(".accordion-bild>img#mode-" + accLen1).addClass("active ").siblings(".accordion-bild>img").removeClass('active');

               });

        });

Und wurde unter /wp-content/themes/ihre-theme-name/js/ in eine Datei eingefügt, die  accordion-konzept.js heißt. Die wurde unter /wp-content/themes/ihre-theme-name/functions.php eingebunden. In unserem Fall wollten wir das Skript nur auf eine bestimmte Unterseite beschränken . Daher haben wir folgende if-Schleife in die functions.php eingefügt.

<?php

$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];

if (strpos($url,'konzept') !== false) {

                wp_enqueue_script( 'accordion-konzept', get_stylesheet_directory_uri()  . '/js/accordion-konzept.js', array('jquery'), true );

                }

?>

Nachdem das Akkordeon erstellt wurde und unser Skript funktioniert hat, ist uns aufgefallen, dass beim Klick auf die unterschiedliche Akkordeon-Elemente, diese leicht springen. Das liegt daran, dass die Elemente padding-top und padding-bottom CSS Eigenschaften hatten und diese werden von den jQuery zu der Höhe mitberechnet. Um den Sprung zu vermeiden, haben wir überall bei den Akkordeon -Elemente die padding-top und padding-bottom Eingenschaften dürch margin-top und margin-bottom ersetzt