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.
Hi,
vielen Dank für den Tipp.
Ich möchte gerne z.B. ein „Menu“ mit 3 Textlinks links in ein Textmodul einbauen und rechts 3 Textmodule mit unterschiedlichen Texten ein und ausblenden.
Wie schaffe ich es, dass ein Textmodul das schon angezeigt wird automatisch ausgeblendet wird, wenn ich ein anderes per Textlink aufrufe?
Kannst du mir da bitte einen Tipp geben?
Danke und herzliche Grüße
Thomas
Hallo Thomas – hast du mal das Tab Modul angeschaut? Das wäre ja das was du suchst oder? Hier eine Anleitung wie du es senkrecht umbauen kannst https://www.youtube.com/watch?v=FVTPhd0Rdh8