Divi Akkordeon Modul.
Standardmässig funktioniert das Divi Akkordeon Modul wie folgt: Ich vergebe pro Accordion einen Titel und einen Inhalt, füge nun weitere hinzu – usw. Im Frontend Bereich kann ich nun die einzelnen Akkordeons aufklappen und das bereits offene schliesst sich wie von Zauberhand wenn ich das nächste „Plus-Symbol“ anklicke. Das Problem dabei ist — naja, was heisst Problem, es ist gar keines — ich kann das bereits offene nicht einfach so schliessen.
Zum einen fehlt mir ein „schliessen-Symbol“ und zum anderen ist die Funktion so nicht in Divi vorgesehen. Nun kommt man aber in Situationen wo man aber diese Funktionen will oder braucht. Ich persönlich mag da gerne, wenn der User intuitiv selbst handeln kann und auch die Möglichkeit dazu bekommt.
Damit Ihr wisst was wir hier gemeinsam machen, anbei mal ein Screenshot. Mit klick auf diesen Link könnt Ihr das ganze auch Live testen!
Lange Rede kurzer Sinn – auf gehts, wir lösen nun das Problem mit ein wenig CSS und jQuery 🙂
Falls Ihr das Divi Mastermind-Child-Theme nutzt, ist bereits ein JS Ordner mit custom.js Datei und ein style.CSS in der Ordnerstruktur vorhanden.
Kopiert bitte diese jQuery Anweisung in die custom.js Datei
// AKKORDEON ÖFFNEN & SCHLIESSEN // ======================================================================= // $('.et_pb_toggle_title').click(function(){ var $toggle = $(this).closest('.et_pb_toggle'); if (!$toggle.hasClass('et_pb_accordion_toggling')) { var $accordion = $toggle.closest('.et_pb_accordion'); if ($toggle.hasClass('et_pb_toggle_open')) { $accordion.addClass('et_pb_accordion_toggling'); $toggle.find('.et_pb_toggle_content').slideToggle(700, function() { $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close'); }); } setTimeout(function(){ $accordion.removeClass('et_pb_accordion_toggling'); }, 750); } });
Kopiert bitte diese CSS Anweisung in die style.css Datei
ACHTUNG: Vergebt dem Akkordeon-Modul die Klasse .bh_accordion, damit ihr die Styles per CSS ändern könnt und eben auch die «+» und «-» Zeichen gesetzt bekommt.
/* ========================================================================== Toggle / Accordion CSS Styling ========================================================================== */ .bh_accordion .et_pb_toggle { border-top:none; border-left:none; border-right:none; border-bottom:1px solid #999; background:none; margin-bottom:0!important; padding:3.2rem 2rem; -webkit-transition: 0.4s; transition: 0.4s; } .bh_accordion .et_pb_toggle_title:before { color: #9b7f4c!important; /* Farbe kann hier geändert werden */ font-family: 'ETModules', sans-serif !important; font-size: 3rem!important; /* Grösse der Schrift */ content: "\4c" !important; /* Plus Zeichen */ font-weight: 200; -webkit-transition: 0.3s; transition: 0.3s; } .bh_accordion .et_pb_toggle_open .et_pb_toggle_title:before { display: block !important; content: "\4b" !important; /* Minus-Zeichen */ font-weight:200; -webkit-transform: rotate(180deg); transform: rotate(180deg); } body .page .bh_accordion .et_pb_toggle_open h5.et_pb_toggle_title { color:#9b7f4c!important /* Farbe des offenen Titels */ } .bh_accordion .et_pb_toggle_open { -webkit-transition: 0.4s; transition: 0.4s; }
In diesem Sinne, viel Spass beim Akkordeon Modul nutzen.
Gruss Benny
Falls Ihr für meinen Codeschnipsel etwas spenden wollt, dürft ihr das gerne HIER tun.
Kleine Spende?
Falls Ihr für meinen Codeschnipsel etwas spenden wollt und mich so unterstützen möchtet, dürft ihr gerne einfach hier draufklicken 🙂
Seit Jahren arbeite ich mit Divi, schreibe Tutorials und teile mein Wissen über CSS, jQuery, PHP und sonstige Tipps & Tricks. Supporte mich und meine freien Arbeiten, damit ich auch künftig meine Freizeit so gut es geht finanzieren kann und so weiterhin tolle und hilfreiche Tipps geben darf !! – VIELEN DANK –.