Divi Sektionen nach Datum ein-und ausblenden lassen

von | 15. November 2020 | Tutorials

Sektion per jQuery ein-und ausblenden

Die Frage ist in unseren Gruppen nicht wirklich neu und tauchte schon bereits mehrere Male auf. Es wurde immer wieder auf Plugins verwiesen. Ich weiss es ist nichts Neues von mir, aber wozu soll man für so einfache Funktionen Plugins verwenden, wenn man sie doch mit ein bisschen jQuery lösen kann?!

Nun zum eigentlichen Thema. Gewünscht wird eine Sektion ab einem gewissen Datum einzublenden oder eben auszublenden. Ich hab mir die Zeit genommen und hab mal getestet. Davon profitiert ihr nun. Es ist eine ganz einfache jQuery-Anweisung, die JEDER Anfänger mit diesem Tutorial hinbekommt.

SCHRITT 1:
Erstellt ganz normal eure Sektion wie ihr sie haben wollt. An dieser Stelle ist ein einzelner Punkt entscheidend – und zwar die Vergabe der Klassen. In meinem Beispiel hab ich es eifach gehalten und habe zwei Klassen vergeben.

1x sektion-einblenden
1x sektion-ausblenden

Bitte gebt die Klassen im „Erweitert“-Tab der Sektion ein. OHNE Punkt und durch einen Leerschlag getrennt ein, wie im Bild zu sehen.

SCHRITT 2:
Nun kommen wir zum magischen Teil des Ganzen. Den jQuery, welchen ich Euch hier zur Verfügung stelle, könnt ihr unter Divi Optionen im Tab „Integration“ einfügen. Achtet bitte bei der Datumsvergabe auf die Schreibweise (engl.). Im gezeigtem Beispiel wird die Sektion am 15.November automatisch ausgeblendet. 

/* Bitte fügt noch ein < script > zu beginn und Ende ein < / script > ohne Leerzeichen geschrieben ein */
	
	jQuery(document).ready(function($){
		var now = new Date();
		var end = new Date("November 15, 2020");
		
		if(now < end)
		{
			$('.sektion-zeigen').show();
		}
		else {
			$('.sektion-ausblenden').hide();
		}
	});

bite fügt noch ein script-Tag ein wie im Bild gezeigt < script >.... mein Code mit Tag wird leider formatiert so dass er nicht angezeigt wird, daher wie im Bild script-Tag am Beginn und Ende einfügen

SCHRITT 3:
Passt nun Euer Datum an, wann ihr die Sektion ausgeblendet haben wollt. Ihr könnt auch ein Datum bei der Variable var now = ein Datum zum einblenden setzen (in meinem Beispiel ist es leer und wird sofort angezeigt!). Speichert das Ganze ab - das war's!

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 –.

©2019 - Ein Design mit von Divi Mastermind - Benny
Impressum | Datenschutz

Divi ist ein eingetragenes Warenzeichen von Elegant Themes. Diese Website ist weder mit Elegant Themes verbunden noch wird sie von Elegant Themes unterstützt.