Ihr habt euch schon mal gefragt wie man denn ein Bild, ein Text oder ein ganzes Modul anzeigen und wieder verstecken kann, wenn man auf ein Button geklickt hat? In dieser kleinen Divi Anleitung zeige ich euch wie ihr so ein kleinen Effekt machen könnt, der einfach einzubauen ist aber eine grosse Wirkung auf eure Webseiten Besucher hat.
Video
Das zu versteckendes Modul
Als erstes müsst ihr einfach mal ein zu versteckendes Modul definieren und ihr die ID ≪verstecken≫ geben.
Button
Danach müsst ihr natürlich noch ein Button einbauen. Diesem Button gebt ihr die Link URL von ≪#verstecken≫ ein und dann müsst ihr noch die CSS Klasse definieren ≪btn_verstecken closed≫
Versteckendes Element
Beim Element welches man verstecken lassen möchte, muss man noch eine ID setzen und ich habe sie hier ≪verstecken≫ genannt
CSS
Wie immer gebt ihr diesen Code in den CSS Bereich ein.
1 2 3 | #verstecken {display: none; }
.btn_verstecken.closed:after {content:"\33"}
.btn_verstecken.opened:after {content:"\33"} |
Javascript
Diesen Befehl baut ihr dann noch im Head Bereich eurer WordPress installation ein.
1 2 3 4 5 6 7 8 9 10 | <script>
jQuery(function($){
$('.btn_verstecken').click(function(e){
e.preventDefault();
$("#verstecken").slideToggle();
$('.btn_verstecken').toggleClass('opened closed');
});
});
</script> |
Vielen Dank. Lässt sich der Button umbenennen, nachdem man drauf geklickt hat?
Also statt „Inhalte anzeigen“ dann „Inhalte verbergen“.
Hallo, vielen Dank für das Video, ich konnte damit mein Problem lösen. Mir scheint, dass oben in dem Code ein Tippfehler ist. Du schreibst im CSS-Code zweimal „\33“. Das führt bei mir dazu, dass unterhalb des Buttons nach dem Klicken eine 3 angezeigt wird. Ich habe die beiden Zeilen korrigiert auf „\3“ und jetzt wird keine 3 mehr angezeigt.
Hallo, vielen Dank für das Video. Ist das in dieser Art auch beim DIVI Table Maker möglich?
Ich muss eine Tabelle erstellen, bei der in der letzten Spalte Buttons sind und beim Klick auf den Button soll ein Slider aufgehen.
Ich brauche da dringend Hilfe.
Hi Stephanie – ja wenn du die ID und die Klasse richtig setzt, sollte es keine Probleme geben.